Advertisement

 

この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。

 

どれもHTMLスニペットとして公開されているので、CSSコードをコピー、貼り付けるだけで利用できる点もポイントです。

 

 

コピペ可能!ナビメニューやリンクの参考にしたいCSSホバーアニメーションまとめ

 

100 underline/overlay animations | The ultimate CSS collection 🥇

今回特にオススメしたいリンク用ホバーアニメーション集で、基本的なものから3Dなどユニークなエフェクトまで100種類が揃います。

 

 

SVGやJS,疑似要素、@keyframeなどは使われておらず、クラス名を追加するだけでスタイリングできます。

 

基本となるベーシックタイプ7種類。

 

See the Pen
The basic
by Temani Afif (@t_afif)
on CodePen.

 

二重ラインを活用したCSSホバーエフェクトも8種類。

 

See the Pen
The double
by Temani Afif (@t_afif)
on CodePen.

 

ドットを活用したユニークRoundedエフェクトも8種類。

 

See the Pen
The rounded
by Temani Afif (@t_afif)
on CodePen.

 

 

CSSeffectsSnippets

テキストリンクやボタンをCSSでスタイリングしたスニペット27個画揃ったアニメーションライブラリ。クリックするとCSSソースコードをコピーできるのも使いやすいですよ。

 

 

 

Text underline hover effects

アンダーライン下線を利用したリンクホバーエフェクト、シンプルで効果的なアニメーション。

See the Pen
Text underline hover effects
by Misha Heesakkers (@MishaHahaha)
on CodePen.

 

 

Animated SVG Links

CSSだけで表現できるユニークなホバーリンクエフェクト。波型ウェーブやジグザグなど、デザインのアクセントにも。

 

See the Pen
Animated SVG Links
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

CSS mouse-out transition effect

左から右にラインが流れるようなアニメーションが特長的なCSSホバーエフェクト。

 

See the Pen
CSS mouse-out transition effect
by Adam Argyle (@argyleink)
on CodePen.

 

 

Simple CSS Line Hover Animations for Links

ウェブサイトのデザインを強調し、控えめなマイクロインタラクションを追加するのに最適なラインアニメーション集。JavaSscriptなどは活用せずに、CSSのみでスタイリングされています。ソースファイルも無料ダウンロード可能です。

 

 

 

Morphing Gooey Text Hover Effect

SVGフィルタを活用したネバネバとしたGooeyエフェクトで、3つのエフェクトが無料のソースコードと一緒に公開されています。

 

 

 

 

Distorted Link Effects with SVG Filters

こちらもSVGフィルタを利用したリンクホバーエフェクト用ライブラリで、直線や円サークル、四角形などのシンプルなシェイプに歪みを加えるDistortionエフェクトを組み合わせています。

 

 

 

CSS-Only Marquee Effect

リンクにマウスカーソルを重ねると、文字テキストが左から右へとサムネイル付きでアニメーションするCSSエフェクト。

 

 

 

Creating a Menu Image Animation on Hover

各リンクを選択するたびに画像が表示されるホバーエフェクトのチュートリアル。こちらはGSAPプラグインを導入していますが、最近よく見かけるエフェクトのひとつ。

 

 

 

Exploring Animations for Menu Hover Effects

上記チュートリアルをよりクリエイティブに仕上げたメニューホバーエフェクト集で、CSSアニメーションの可能性を感じる作品となっています。

 

 

 

Link hover animation

リンクをホバーすると、くるりと円を描くホバーエフェクトはSVGを利用した小技テクニック。

 

See the Pen
Link hover animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

Gradient text on hover

文字テキストリンクのホバーエフェクトにグラデーションを利用したCSSアニメーション。

 

See the Pen
Gradient text on hover
by Mike Young (@miketricking)
on CodePen.

 

 

SCSS link hover animations

アンダーライン下線と背景を利用した、シンプルで使いやすいCSSホバーエフェクト8種類。

 

See the Pen
SCSS link hover animations
by Jens Lettkemann (@jltk)
on CodePen.

 

 

今後もCSSホバーアニメーションも随時アップデート予定となっています。

 

Webデザイン制作の面倒な作業をラクにする、便利なCSS便利ツールも活用してみてはいかがでしょう。

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools f