マウスホバーで文字をふわっと光らせる！CSSだけで作る簡単アニメーション

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトのデザインにおいて、ちょっとしたアニメーションが加わるだけで印象が大きく変わることはよくあります。

その中でも、「マウスホバー時に文字がふわっと光る」エフェクトは、シンプルながらも洗練された印象を与えることができるテクニックの一つです。

今回は、CSSのみで実装できる「マウスホバーで文字を光らせるアニメーション」の作り方を紹介します。
手軽に導入できるので、ぜひ試してみてください！

1. シンプルに文字を光らせるアニメーション

まずは、基本的なホバーアニメーションを作成します。
テキストの色を変えながら、ぼんやりと発光するようなエフェクトを加えます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

2. グラデーションを使って幻想的な光り方を実現

次に、グラデーションを使ってより幻想的な光の演出をしてみましょう。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

background-clip: text; を使い、テキストにグラデーションを適用
color: transparent; でテキストの色を透明にして背景を見せる
text-shadow で幻想的な光を表現

3. 波のように光が流れるアニメーション

最後に、光が動いているようなアニメーションを加えてみます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まとめ

「マウスホバーで文字を光らせるアニメーション」は、CSSだけで手軽に実装できるのに、視覚的なインパクトが大きいのが魅力です。

を組み合わせて、サイトのデザインをより魅力的にしてみてください！

そのお悩み全て解決します！

・個人だから他のWeb制作会社よりも圧倒的に安い！

・お客様に寄り添った完全オーダーメイド

お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。

一緒に素敵なWebサイトを作りましょう！