CSSでスポットライト表現を作る

Kyouhei Horizumi 2024/10/11

スポットライト表現とは

Webサイトでスポットライトを使うことについて考えたいと思います。

光が要素に当たるような表現で、かなり目立たせる事ができます。デザインの幅を大きく広げる事ができますね。

スポットライトをCSSで再現

暗闇とスポットライト両方をCSSのradial-gradientを使って再現させます。

<div class="spotlight"></div>

.spotlight {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(
      circle at center,
      transparent,
      rgba(211, 188, 103, 0.1) 70%,
      rgba(0, 0, 0, 0.8) 80%
    );
    animation: tebure 1s;
    animation-iteration-count: infinite;
}

スポットライトを前後に動かすようなアニメーションをしてみます。

スポットライトをアニメーションさせる

スポットライト（radial-gradient）をアニメーションさせたいところですが、以下のコードだと動きません。

@keyframes animation {
  0%,
  100% {
    background-image: radial-gradient(
      circle at center,
      transparent,
      rgba(211, 188, 103, 0.1) 70%,
      rgba(0, 0, 0, 0.8) 85%
    );
  }
  50% {
    background-image: radial-gradient(
      circle at center,
      transparent,
      rgba(211, 188, 103, 0.1) 70%,
      rgba(0, 0, 0, 0.8) 80%
    );
  }
}

理由としては、background-imageはアニメーションの種類が 離散値 だからです。一瞬で切り替わってしまいます。

そこでアニメーションに最適な補間が効くように、CSSカスタムプロパティを定義してsyntaxには <percentage> などアニメーションがされるデータ型にします。

@property --x {
  syntax: "<percentage>";
  initial-value: 85%;
  inherits: false;
}

.spotlight {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(
      circle at center,
      transparent,
      rgba(211, 188, 103, 0.1) 70%,
      rgba(0, 0, 0, 0.8) var(--x)
    );
    animation: animation 1s;
    animation-iteration-count: infinite;
}

@keyframes animation {
  0%,
  100% {
    --x: 85%;
  }
  50% {
    --x: 80%;
  }
}

これで、スポットライトをCSSアニメーションさせることができました。