CSSだけでアンダーラインアニメーション【hover】

コーディング
スポンサーリンク

マウスを合わせてみてください。
hoverするとアンダーラインが伸びます。

See the Pen
abmoONy
by nzm (@nzm)
on CodePen.

 

「hoverするとアニメーション」はCSSだけで簡単に作れる

a { アニーション前の状態 }
a:hover {アニメーション後の状態 & transition:時間;}

今回はアンダーラインを伸ばすデザインにしたいので、アンダーラインを::afterを使って擬似要素で書きます。

この時にwidth:100%にしてアンダーラインを幅いっぱいにせず、width:0でhoverする前(アニメーションが始まる前)の状態にしておきます。

そしてhoverしたら幅いっぱいに伸びるようにしたいので、
a:hover::after{ width:100% }
そこにtransitionをつけて滑らかに動くようにします。
今回はtransition: all 0.3s easeとしていますが、ゆっくりしたい場合は0.5sなど時間を長めにすればOKです。

 

コメント

タイトルとURLをコピーしました