動くテキスト

マウスホバーで浮き沈みするテキスト

CSSで作るマウスホバーで浮き沈みする文字

See the Pen マウスホバーで近づいてくる見える影文字 by チータツ (@cheese_fuji) on CodePen.

CSSの解説

text-shadowによる影のぼかし具合を調整して、文字が浮き上がったように錯覚させるCSS。実際には座標の変更などはしておらず、影と大きさを少し変化させるだけです。

  • 初期状態の文字.shadow
    • text-shadowでオフセット0のぼかしが少ない影を付ける
    • ホバー範囲を文字に合わせるためにdisplay: inline-blockを指定
    • 滑らかに変化させるため、変化時間transitionを設定
  • ホバー時の文字.shadow:hover
    • text-shadowでオフセット0のぼかしが大きい影を付ける
    • font-sizeで少しだけ文字を大きくする

プロパティtext-shadowを使った基本的な影の付け方については、こちらをご覧ください。

text-shadowを使った影付き文字

応用CSS

マウスホバーで沈み込む影付き文字

浮き上がるCSSとは反対に、やわらかい影 → シャープな影 に変化させると沈み込むように見えます。ホバーの際にはフォントサイズも少しだけ小さくすれば完璧です。

See the Pen マウスホバーで文字が沈み込む影文字 by チータツ (@cheese_fuji) on CodePen.