IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

メニューをホバーした時に下線が動くアニメーションを作ってみる

はじめに

ここでは、メニューをホバーした時に下線が動くアニメーションを作ってみることにする。

f:id:matt-note:20190318152231g:plain

 

作ってみる

HTML を記述する。

f:id:matt-note:20190318152349p:plain

 

CSS を記述する。

f:id:matt-note:20190318154113p:plain

-> これで完成。

 

リンク要素に after で下線となる要素を作成しておいて、リンクがホバーした時に下線の width を 100% にする。transition でアニメーションの速度を設定できる。

 

ホバー時の下線を水玉模様にしてみる。

f:id:matt-note:20190318155545g:plain

 

CSS を記述する。

f:id:matt-note:20190318155858p:plain

-> これで完成。

 

box-shadow の色を変更することで、水玉の色を変更できる。

f:id:matt-note:20190318161636p:plain

f:id:matt-note:20190318161830g:plain