Advertisement

nav-hover-animation-top

 

ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。

 

 

どれも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. 左からラインが伸びる1

See the Pen #1169 – Menu with border on hover by LittleSnippets.net (@littlesnippets) on CodePen.

 

マウスホバーすることで、上に配置されたラインがアニメーション付きで、左からスライド表示されるエフェクト。

 

06. 左からラインが伸びる2

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個まとめ

一緒に活用したい、インタラクティブで面白いホバーエフェクトを利用した、ボタンデザインを集めています。

css-button-top

 

 

参照元リンク : Some Inspiration for Menus using Animated Lines – Littlesnippets.net