プログラミング

【CSS】:hover でボーダーボトムをふわっと出現させるコードを紹介します

スポンサーリンク

 

今回は、hover により、ボーダーボトムをふわっと出現させるアニメーションを紹介します。
ヘッダーのグローバルナビゲーションでよく見かけますね。

クリックできる目次

コード

See the Pen
Untitled
by t.h (@tomtom15)
on CodePen.

CSSの記載は必要最低限に抑えてますので、余白など足りない部分はアレンジしてください。

CSSには、初心者の人でもわかりやすいように、コメントを入れてます。
不要だったら消しちゃってください。

 

 

まとめ

ヘッダーメニュー(グローバルナビゲーション)では、
よく使われるアニメーションなので是非試してみてください。

フォントの色、ボーダーの太さなど、出現させるまでの時間など、
お好みで変えていろいろ試して、自分好みにカスタマイズしちゃってください。

 

hoverアニメーションはこちらでたくさん紹介されております。https://lab.sonicmoov.com/markup/css/hover-css/

hover関連の記事も紹介しておきます。↓

スポンサーリンク

-プログラミング
-, , , , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5