ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。
どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。
詳細は以下から。
CSSで作成する、ナビゲーションメニュー用アニメーションエフェクトまとめ
01. 文字を上からスライド表示
See the Pen #1226 – Horizontal menu with slide down on hover by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、上からスライドするアニメーションエフェクト。
02. 文字を下からスライド表示
See the Pen #1143 – Horizontal Menu Items by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、data要素をアニメーション付きスライド表示するエフェクト。
03. 文字を左からスライド表示
See the Pen #1175 – Menu sliding border on hover by LittleSnippets.net (@littlesnippets) on CodePen.
04. 左右からラインが伸びる
See the Pen #1217 – Horizonatal Menu by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、上下に配置されたラインがアニメーション付きで表示されるエフェクト。
05. 左からラインが伸びる１
See the Pen #1169 – Menu with border on hover by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、上に配置されたラインがアニメーション付きで、左からスライド表示されるエフェクト。
06. 左からラインが伸びる２
See the Pen #1135 – Menu with reveal hover effect by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、下に配置されたラインがアニメーション付きで、左からスライド表示されるエフェクト。
07. 上下にラインをフェードイン
See the Pen #1211 – Menu with animation on hover by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、文字テキストの中央からラインが、アニメーション付きで上下にフェードイン表示するエフェクト。
08. 左右にラインをフェードイン
See the Pen #1198 – Menu vertical line effect on hover by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、文字テキストの中央からラインが、アニメーション付きで左右にフェードイン表示するエフェクト。
09. 左右にかぎ括弧をフェードイン
See the Pen #1189 – Horizontal menu items by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、文字テキストの中央からかぎ括弧がアニメーション付きで上下にフェードイン表示するエフェクト。
10. 左右に水平ラインをフェードイン
See the Pen #1155 – Menu with line hover effect by LittleSnippets.net (@littlesnippets) on CodePen.
マウスホバーすることで、文字テキストの中央からラインが、アニメーション付きで打ち消し線のように伸びるエフェクト。
CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ
一緒に活用したい、インタラクティブで面白いホバーエフェクトを利用した、ボタンデザインを集めています。
参照元リンク : Some Inspiration for Menus using Animated Lines – Littlesnippets.net
