cssでマウスオーバした時に下線 をうにょーんってさせるアニメーションです。
See the Pen gXoVEX by version1 (@version1) on CodePen.
それぞれ、Spring,Summer,Autumn,Winterの文字の 上にマウスを当てるとアンダーラインが引かれるようになっています。
demoにはcodepenを利用しています。 興味ある方はこちらもどうぞ CodePen – webサービスのデザインを考えるときにおすすめの海外サイト
cssについて、 簡単に説明すると肝になっているのは、
.list-item::after{
content: '';
display:block;
width:0;
margin: 6px auto 0;
border-bottom: 1px solid white;
transition: width 0.3s ease-in-out;
}
.list-item:hover::after{
width: 100%;
}
ここの部分です。
after擬似要素で見えない下線を指定する
まずは、 :after擬似要素で、それぞれSpringなど季節の 文字の後にwidth:0で下のボーダーだけが存在する要素を 入れ込みます。
その後に、 .list-item:hover::afterで マウスオーバーされた時のスタイルを指定して いきます。 ここではwidth:100pxが指定させているので、 下線が表示されるようになります。
transformでうにょーんを表現する
注意点として、 transitionで最初borderのwidthが0である部分から、 マウスオーバーされてwidthが100%になるまでの、 時間を指定する必要があります。
この例では、 0.3秒かけて変化させるという指定を 行なっているので、 実際のサンプルのような動きになります。 (指定しないといきなり下線が表示される感じになります。)
aタグをinline-blockで指定する
また、 aタグでdisplay:inline-blockを 指定していますが、
a {
color:white;
display: inline-block;
font-size:30px;
text-decoration:none;
}
これを指定しないと、 文字幅でなく、画面の横幅全体に下線が 広がってしまうので注意してください。