[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック

テキストリンクのホバー時に波線をうにょうにょとアニメーションさせるスタイルシートのテクニックを紹介します。

波線はSVGで描くので、非常に滑らかに表示されます。
※下記はアニメーションGIFでコマを落としているため、実際はもっとスムーズです。

デモのキャプチャ


実装は非常にシンプルで、コピペで利用できます。

HTML

通常のテキストリンクと同様に、a要素で囲うだけです。

CSS

リンクの通常の下線は「text-decoration: none;」で無しにして、backgroundプロパティで少し太めの下線を用意します。波線のアニメーションはSVGです。

実際の動作は、下記デモページでお楽しみください。

See the Pen Link Effectz - Squiggle by Geoff Graham (@geoffgraham) on CodePen.

sponsors

top of page

©2018 coliss