こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は「テキストが虹色に光るアニメーション」をテーマに、CSSだけで実装できる方法をご紹介します!
派手でキャッチーなデザインはもちろん、Webサイトのアクセントとして取り入れると訪問者の目を引きやすくなります。
特にイベントサイトやキャンペーンページ、ポートフォリオサイトなどでは効果的に使える表現です。
テキストが虹色に変化していくアニメーションは、一見すると難しそうに見えるかもしれません。
しかし、実は background-clip や linear-gradient、animation を組み合わせるだけで比較的シンプルに実装できます。この記事では基本コードから応用例までわかりやすく解説していきます。
基本的な虹色テキストアニメーション
まずは、CSSのみで実現できるシンプルなサンプルコードです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは linear-gradient をテキストに適用し、background-clip: text; を利用して背景グラデーションを文字の形で切り抜いています。さらに @keyframes でグラデーションを動かすことで、テキストが虹色に光っているように見える仕組みです。
応用例：グロー効果を追加する
より華やかに見せたい場合は、テキストに「光のにじみ（グロー）」を加えてみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように text-shadow を追加すると、テキスト自体が光り輝くような雰囲気になり、タイトルやヘッダーに適しています。
実際の使いどころ
- キャンペーンやイベントページのメインタイトル
- クリエイターのポートフォリオサイト
- 404ページやゲーム系サイトなど遊び心ある演出
派手さがあるので常時使うよりも、アクセント的に利用するのがおすすめです。
まとめ
虹色に光るテキストアニメーションは、CSSのグラデーションとアニメーションを組み合わせることで簡単に実装できます!
グロー効果などを加えるとさらに印象的になり、訪問者の目を引きやすいデザインになります。
ぜひイベントサイトや特設ページで活用してみてください。
satokotadesignキャンペーン実施中！
