【CSS】要素をキラッと光らせる方法

こんにちは！さこちゃんです。

今回は「要素をキラッと光らせる方法」についてです。

まろんちゃん

Webページでバナーを設置するんだけど、コンバージョン率を上げるためにキラッと光らせたい〜

さこちゃん

それならCSSアニメーションだけで簡単に実装できるよ〜

デモ確認
動きの仕組み
HTML構造を作る
CSSを書く
追記：ホバー時のみにキラッとさせる方法
おわりに

デモ確認

デモはこちら。

円形の画像の上にキラッとキラっと光るアニメーションを無限ループさせています。

動きの仕組み

ここで動きの仕組みを確認しておきます。

擬似要素 .img::before で斜め切りのグラデーションの光線（キラッと）を生成
それが left: -50%; から left:150%; に向かって移動する
これをCSSアニメーションで無限ループさせている

HTML構造を作る

HTMLはこちらです。画像パスは環境にあわせて書き換えてください。

<body>
　<div class="allwrap" id="allwrap">
	<div class="img"><img src="./assets/img/demo08_img01.png" alt="click me!" width="200" height="200"></div>
　</div>
</body>

CSSを書く

次にCSSを書きます。コードはこちらです。

 /*全体のレイアウトの調整*/
 .allwrap {
　　position: relative;
　　width: 100%;
　　height: 100vh;
　　max-height: 100dvh;
　　display: flex;
　　justify-content: center;
　　align-items: center;
　　background: #3c3c3c;
 }

 /*円形の画像の調整*/
 .img {
　　position: relative;
　　width: 200px;
　　height: 200px;
　　overflow: hidden;
　　border-radius: 50%;
 }

 /*キラッの調整*/
 .img::before {
　　content: '';
　　width: 100%;
　　height: 100%;
　　position: absolute;
　　top: 0;
　　left: -50%;
　　z-index: 2;
　　display: block;
　　background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
 	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
　　-webkit-transform: skewX(45deg);
　　transform: skewX(45deg);
　　color: transparent;
　　animation: shine 4s infinite ease-in-out;
 }
 @keyframes shine {
　　10% {
　　　left: 150%;
　　　opacity: 1;
　　}
　　100% {
　　　left: 150%;
　　　opacity: 0;
　　}
 }
 .img img {
　　vertical-align: bottom;
 }

いくつかポイントがあるので以下で解説していきます。

ポイント1　.img

.img {
  position: relative;   
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

元画像が円形なので、 border-radius: 50%;を指定します。
さらにoverflow: hidden;し、はみ出したグラデーションを円形に切り取ることができます。
こうすることで、画像内に綺麗にキラッとした動きが収まるようになります。

ポイント2　.img::before

.img::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;  /* 初期位置：左の外側から入ってくる */
  z-index: 2;
  display: block;
  background: linear-gradient(...); /* 白い光のグラデーション */
  transform: skewX(45deg); /* 斜めにしてシャインっぽく */
  animation: shine 4s infinite ease-in-out; /* 無限ループアニメーション */
}

left:-50%; を指定しておくことで、円形の画像の外側からグラデーションが通過するように見せます。

background: linear-gradient(to right, 
  rgba(255,255,255,0) 0%, // 左
  rgba(255,255,255,0.8) 50%,  // 中央
  rgba(255,255,255,0) 100%); // 右

中央を白く、両端を透明に指定することでキラッと感を出すことできます。
これに skewX(45deg) を指定することで、斜めの光の筋を表現します。

ポイント3　アニメーション

@keyframes shine {
  10% {
    left: 150%;  /* 擬似要素が画像の右端を超えて移動完了 */
    opacity: 1;
  }
  100% {
    left: 150%;  /* 完全に移動し終えた状態 */
    opacity: 0;  /* フェードアウト */
  }
}

動きの解説はこんな感じです。

0% ・・・ left: -50%; が初期位置
10% ・・・初期位置から10%に到達時に擬似要素が left: 150%; まで一気に移動する
100% ・・・同じ位置で徐々にフェードアウト（ opacity:0; ）することでループの挙動を自然に見せる

上記の動作が4秒おきに無限ループします。

追記：ホバー時のみにキラッとさせる方法

ホバーした時だけキラッとさせたい場合のデモはこちら。

.img::before に対して、ホバー時だけ animation を適用するように変更すればOKです。

CSSを以下のように修正します。ハイライトが追記箇所です。

.img {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.img::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  z-index: 2;
  display: block;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(45deg);
  opacity: 0; /* 初期は非表示 */
  pointer-events: none; /* hoverの邪魔をしないために追加（任意） */
}

/* ホバー時のみ shine アニメーションを適用 */
.img:hover::before {
  animation: shine 1.2s ease-out;
  opacity: 1; /* 表示する */
}
 @keyframes shine {
　　10% {
　　　left: 150%;
　　　opacity: 1;
　　}
　　100% {
　　　left: 150%;
　　　opacity: 0;
　　}
 }
 .img img {
　　vertical-align: bottom;
 }

おわりに

いかがでしょうか？

今回は、要素をキラッと光らせる方法について解説しました。

CSSアニメーションだけで手軽に再現できるのが便利ですね。

ぜひ参考にしてみてください！