【CSS】要素を発光させる方法｜box-shadow・filterで光るアニメーションを作る

学習の備忘録です。タスク管理アプリを作っています。

以前ごほうびチケット獲得の処理を作った時、「スタンプカードが消えるときの光り方をもうちょっとビカビカさせたい……」となったので、もっとそれっぽくなるように改修しました。

ちなみに、ごほうびチケット獲得処理を実装したときの記事は以下です。

以前はfilter: brightness()だけで済ませていましたが、今回はbox-shadowも使っていきます。

本記事は個人の学習記録です。内容の正確性を保証するものではありませんので、あらかじめご了承ください。

やりたいこと

現在の.card-fadeoutのcssは以下です。

.card-fadeout {
    animation: cardFadeout 0.8s ease-in forwards;
}

@keyframes cardFadeout {
    0%   { opacity: 1; filter: brightness(1); }
    50%  { opacity: 0.8; filter: brightness(2); }
    100% { opacity: 0; filter: brightness(3); }
}

そしてスタンプカードが消える演出は以下。

現状、「青い枠線やマークが白んで消える」感じなので、これを「金色に発光しながら消える」感じにしていきます。

box-shadowとfilterを組み合わせる

改修後のcssは以下です。

.card-fadeout {
    animation: cardFadeout 1s linear forwards;
}

@keyframes cardFadeout {
    0%   { opacity: 1; filter: brightness(1); box-shadow: none; }
    30%  { opacity: 1; filter: brightness(1.5) sepia(0.6) saturate(3);
           box-shadow: 0 0 20px 8px rgb(255, 251, 231), 0 0 40px 16px rgba(255, 251, 231, 0.5); }
    60%  { opacity: 1; filter: brightness(2.5) sepia(0.6) saturate(3);
           box-shadow: 0 0 40px 16px rgb(255, 251, 231), 0 0 60px 32px rgba(255, 251, 231, 0.7); }
    80%  { opacity: 0.8; filter: brightness(3) sepia(0.6) saturate(2);
           box-shadow: 0 0 20px 8px rgb(255, 251, 231), 0 0 40px 16px rgba(255, 251, 231, 0.8); }
    100% { opacity: 0; filter: brightness(1); box-shadow: none; }
}

• box-shadowは外側を光らせるため
• filterは内側を金色っぽく見せるため

に使います。

box-shadow

要素に影を付けたいときに使います。

box-shadow: X軸方向に影を伸ばす Y軸方向に影を伸ばす ぼかしの範囲(px) 広がり(px) 色

です。

box-shadow: 0 0 20px 8px rgb(255, 251, 231), 0 0 40px 16px rgba(255, 251, 231, 0.5);

みたいに、カンマで条件が2つ繋げられている場合は、「第一層目の影」「第二層目の影」を示しています。

上記の例では、第一層目の光として「0 0 20px 8px rgb(255, 251, 231)」を定義し、第二層目の光として「0 0 40px 16px rgba(255, 251, 231, 0.5)」を定義しています。

• 第一層目：0 0 20px 8px rgb(255, 251, 231)　←　内側の濃い目の光
• 第二層目：0 0 40px 16px rgba(255, 251, 231, 0.5)　←　外側の薄くて広い光

みたいに、層を重ねることで自然な発光に見せかけています。

filter

filter: brightness(1.5) sepia(0.6) saturate(3);

• brightness……明度を操作します。値が大きいほど白っぽくなります。
  →デモサイト（外部サイト）
• sepia……要素をセピア色にします。値が大きいほど黄色/茶色っぽくなります。
  →デモサイト（外部サイト）
• saturate……彩度を操作します。値が大きいほど色鮮やかになります。
  →デモサイト（外部サイト）

sepiaの値が大きすぎると黄色くなりすぎるので調整していい感じにしていきます。

まとめ

調整した後の動作は以下のようになります。

以前よりは光って見えるようになりました！

• box-shadowで外側に色を付ける
• filterで内側に色を付ける（既存の色を加工する）
• @keyframesで光の範囲を指定する

上記の記述で、要素が発光しているように見せかけることができます。