左から右から、中央からにょろ~ん

HTML&CSS

こんにちは、ゆんつです。

リンクにマウスカーソルを乗っけたときのアニメーションにはいろんなものがあります

そのようなアニメーションの中で良く見かけるのが、リンクにマウスカーソルを乗っけると左側からにょろ~んと下線が伸びるアニメーションです。

今日はリンクにマウスカーソルを乗っけた時に、左や右、または中心からにょろーんとアンダーラインが伸びるアニメーションを作ろうと思います。

左または右からアンダーラインがにょろーんと伸びる

考え方はとても簡単です。

アンダーラインを付けたい要素に線のスタイルを設定した疑似要素を付けwidhtは0にしておきます。

そして、その疑似要素にマウスが乗った時にwidthが100%になるように設定し、変化のスピードがゆっくりアニメーションするようにtransitionを付けてあげれば良いだけです。

具体的に書いてみます。

See the Pen left by konpure (@yuntu) on CodePen.0

リンクにマウスを乗っけてみてもらうと、左から右へアンダーラインがにょろ~んと出現してくることと思います。

leftをrightに変更すれば線の始点が右に変わり、マウスがリンクに乗った時に右から左へにょろ~んと線が伸びてきます。

See the Pen right by konpure (@yuntu) on CodePen.0

真ん中からアンダーラインが左右ににょろ~んと伸びる

真ん中から左右の端っこにむかってアンダーラインを伸ばしたい場合は、これまでとは少しだけ考え方が変わります。

これまでは左端又は右端がアンダーラインの出発点でしたが、この出発点を中心に移動させ、中心から左に伸びる線と、中心から右に伸びる線という2つの疑似要素を作る必要があります。

ですので疑似要素は2つ追加します。

そして片方はleft: 50%もう片方はright: 50%として出発点を要素の中心に移動させます。

widthについても左右からアンダーラインが伸びるときはホバー時のwidhtを100%にしていましたが、2つの疑似要素は要素の中心から始まるので50%ずつwidthを設定すれば合計で100%の長さになることになります。

よって各疑似要素のホバー時のwidthは50%となります。

実際に作ってみます。

See the Pen center by konpure (@yuntu) on CodePen.0

マウスをリンクに乗せると、中心から線が伸びて左右の両端に到達するようになっていると思います。

以上がリンクにマウスカーソルを乗せた時に伸びてくる3パターンのアンダーラインアニメーションです。

それでは、またー。

コメント