マウスホバーした時のアンダーラインアニメーション7つ
グローバルメニューなどでよく見かける、マウスホバーしたら下線がスッと出てきて離れたら消える、そんなアニメーションの実装をしたいと思います。
基本のHTML & CSS
7つのアニメーションを見ていきますが、すべてに共通するコードです。
次の項目からは、追加コードのみ記載しています。
追加CSSにはクラス名に番号が振ってありますが、適宜名前を変更してください。
<p class="sample"><a href="">テキストテキスト</a></p>
.sample a {
position: relative;
display: inline-block;
text-decoration: none;
}
.sample a::after {
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
background-color: #333;
}
上からフェードイン
.sample1 a::after {
bottom: 2px;
opacity: 0;
transition: .3s;
}
.sample1 a:hover::after {
bottom: -4px;
opacity: 1;
}
下からフェードイン
.sample2 a::after {
bottom: -8px;
opacity: 0;
transition: .3s;
}
.sample2 a:hover::after {
bottom: -4px;
opacity: 1;
}
左から出て、左へ戻る
.sample3 a::after {
bottom: -4px;
transform: scale(0, 1);
transform-origin: left top;
transition: .3s;
}
.sample3 a:hover::after {
transform: scale(1, 1);
}
右から出て、右へ戻る
.sample4 a::after {
bottom: -4px;
transform: scale(0, 1);
transform-origin: right top;
transition: .3s;
}
.sample4 a:hover::after {
transform: scale(1, 1);
}
左から出て、右に向かう
.sample5 a::after {
bottom: -4px;
transform: scale(0, 1);
transform-origin: right top;
}
.sample5 a:hover::after {
transform-origin: left top;
transform: scale(1, 1);
}
右から出て、左に向かう
.sample6 a::after {
bottom: -4px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
.sample6 a:hover::after {
transform-origin: right top;
transform: scale(1, 1);
}
中央から左右に広がる
.sample7 a::after {
bottom: -4px;
transform: scale(0, 1);
transform-origin: center top;
transition: .3s;
}
.sample7 a:hover::after {
transform: scale(1, 1);
}
コード解説
<a>
に疑似要素としてアンダーラインを作成し、ホバー前後で状態変化させます。
フェードイン系のアニメーションでは位置とopacity
を、伸び縮みする系にアニメーションでは、x軸方向のスケールを変化させています。
transform-origin
は要素を変形させる時の起点を表し、それによって左から線を伸ばしたり、出た方と反対側に線を戻したりしています。
sample5
とsample6
ではtransition
にtransform
を指定しないとガタつきます。
まとめ
いかがでしたか?
ただ下線を引くだけののアニメーションでも、様々な表現が可能です。
自分なりにカスタマイズしてみてください。
最後までご覧いただきありがとうございました。