暗闇を切り裂く、一筋の光。 今回は、暗い空間に映える「スポットライト」をテーマにしたCSSテキストアニメーションを5つ紹介します。
文字の表面を光が滑るように動き、視線を自然と惹きつけるドラマチックな演出です。 複雑なスクリプトは不要。SWELLにコピペするだけで、待機中もホバー時もスタイリッシュに動くモダンなコードをご用意しました。
Searchlight Sweep（サーチライト・スイープ）
暗闇に沈んだテキストの上を、円形のサーチライトが左右に行き来して文字を浮かび上がらせます。ホバーするとスポットライトが全体に広がり、文字の全貌がくっきりと現れます。
See the Pen Searchlight Sweep by BaseKENT (@basekent) on CodePen.
調整方法
- 光の大きさ (通常時):
.spot-searchlight内のcircle 60pxの数値を80pxや100pxに大きくすると、照らされる範囲が広がり文字が読みやすくなります。逆に40pxにすると、よりピンポイントな光になります。 - 光の動きの速さ:
animation: searchlightMove 4s ...の4s（4秒）を2sにすると速く動き、6sにするとゆっくり動きます。 - 光が動く範囲: 現在
background-size: 200% 100%;としていますが、幅を150%にすると動く距離が短くなり、300%にするとより遠くまで光が移動しているように見えます（文字が全く見えない瞬間が長くなります）。 - 背景色との同化: グラデーションの最後（100%）の色を
#000000にしています。もしサイトの背景が真っ黒ではなく濃いグレー（例:#1a1a1a）の場合は、親要素のbackground-colorとグラデーションの100%の色を同じ#1a1a1aに揃えると、綺麗に同化して自然に見えます。
Torch Focus（トーチ・フォーカス）
懐中電灯（トーチ）で暗闇を照らしているように、文字の一部だけが丸く切り取られて表示されます。待機中は常に光がうろうろと動き回り、ホバーすると瞬時に全画面が明るくなります。
See the Pen Torch Focus by BaseKENT (@basekent) on CodePen.
調整方法
- 背景色とのコントラスト:
.dark-wrapperの背景色を#1a1a1a（濃いグレー）にしています。これを#000000（完全な黒）にすると、光が当たっていないときの文字が背景と完全に同化して見えなくなります。「暗闇から光と共に現れる」演出にしたい場合は背景も#000000にしてみてください。 - 光の色を変更する: 青白いサイバーな雰囲気にしたい場合は、
rgba(255, 255, 255, ...)の部分をrgba(0, 150, 255, ...)に一括置換してみてください。赤い光ならrgba(255, 50, 50, ...)など、ガラッと雰囲気が変わります。 - 光の移動距離:
@keyframes backlightPassの-2emと2emを-3emと3emにすると、より遠くから光がやってきて、遠くへ消えていくように見えます。
Backlight Silhouette（バックライト・シルエット）
文字自体は完全な真っ黒のシルエットとなり、その背後を強い光源が通り過ぎていきます。逆光によるドラマチックな演出で、ホバーすると光が中央でピタリと止まり、後光のように広がります。
See the Pen Backlight Silhouette by BaseKENT (@basekent) on CodePen.
調整方法
- 光の色:
rgba(255, 255, 255, 0.8)の部分をrgba(0, 150, 255, 0.8)のように変更すると、青や赤のカラーライトになります。 - 実装のコツ: このエフェクトは、サイトの背景が暗い（ダークグレーなど）場所で最も美しく見えます。
Laser Scanner（レーザー・スキャナー）
細く鋭いレーザー光線のようなスポットライトが、文字を斜めにスキャンし続けます。サイバー感のある洗練された演出で、ホバーするとレーザーが全体を明るく照らし出します。
See the Pen Laser Scanner by BaseKENT (@basekent) on CodePen.
調整方法
- レーザーの太さ:
@keyframes内の%の幅（-20%と-10%の差）を大きくすると、より太い光の帯になります。 - レーザーの色:
#0ffを好みのアクセントカラーに変更してください。
Cinematic Fade Light（シネマティック・フェード）
映画のオープニングのように、暗闇の中から柔らかい光がさっと差し込み、文字の一部をふわりと浮かび上がらせます。上品で静かな余韻があり、ホバーで光が全体に回って完全に出現します。
See the Pen Cinematic Fade Light by BaseKENT (@basekent) on CodePen.
調整方法
- 光の柔らかさ:
linear-gradientの%の間隔（30%, 50%, 70%）を広げると、よりぼんやりとした柔らかい光になります。 - スピード:
animationの5sを長めにすると、ゆったりとした映画のような重厚感が出ます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
