- 投稿日：2022年03月11日 09時00分00秒
- 更新日：2022年03月11日 08時45分50秒
タグにマウスホバーしたとき下線を走らせる
デモ
左から右に流れる
running-bottomLine from-left to-right thickness-1
running-bottomLine from-left to-right thickness-2
running-bottomLine from-left to-right thickness-3
running-bottomLine from-left to-right thickness-4
右から左に流れる
running-bottomLine from-right to-left thickness-1
running-bottomLine from-right to-left thickness-2
running-bottomLine from-right to-left thickness-3
running-bottomLine from-right to-left thickness-4
左から来て左に消える
running-bottomLine from-left to-left thickness-1
running-bottomLine from-left to-left thickness-2
running-bottomLine from-left to-left thickness-3
running-bottomLine from-left to-left thickness-4
右から来て右に消える
running-bottomLine from-right to-right thickness-1
running-bottomLine from-right to-right thickness-2
running-bottomLine from-right to-right thickness-3
running-bottomLine from-right to-right thickness-4
説明・補足・注意事項
マウスホバーしていただくと動きます。
スマホ表示（max-width: 600px）のときは最初からhoverした状態となるようにしています。
クラスで線の太さ（1~4)と走る方向（左右）を指定出来るようにしてます。
表示しているテキストはクラス名です。
共通部分(.running-bottomLine, .running-bottomLine::after)
.running-bottomLine{
position: relative;
margin-bottom:0;
}
.running-bottomLine::after{
position: absolute;
left: 0;
content: '';
width: 100%;
transform: scale(0, 1);
transition: transform .3s;
background: linear-gradient(90deg, red 0, red 100px, rgb(0,0,0,0) 100px, rgb(0,0,0,0) 100%);
}説明
running-bottomLineクラスに対して設定している共通スタイルです。
動く線は::afterに設定するのでposisionで重なるようにしています。
::afterのbackgroundスタイルにlinear-gradient()関数を使用しています。
これは複数の色を使った画像を作成してくれるというもので、グラデーションを表現するときなどに使われるものです。
今回は下線の全てを変化させるのではなく一部のみ変化させたいと思いました。
そのためlinear-gradient()関数を使い「左から100pxまでredにして、それ以降100%まで透明にしろ」と指定することで、まるで左から100pxのみの線を表現しています。
結果短い線が下線上を走っているように見せています。
詳細を詳しく説明しているページを下部にリンク張ってますので、ご興味のある方はそちらへどうぞ。
一番重要なことなのですが、実はこれ下線の位置を動かしているわけではありません。
scale()関数を使って縮尺を0から1へ変化させることで、まるで走っているように見えているだけです。
アニメーションにかける時間を短くしていただければわかりますが、走ってくるときも走り去るときも線がどんどん短くなっていきます。
本当に走らせたい場合はtranslateX()関数を使う必要があります。
その際は走り去って画面から消えたあとに必ず既定の位置まで移動させる処理をつけるようにしてください。
そうじゃないと左からきて右に行くというアニメーションは１回目しか動作していないように見えてしまいますので。
走る処理
/* 左から走ってくる */
.running-bottomLine.from-left:hover::after{
transform-origin: left top;
transform: scale(1, 1);
}
/* 右から走ってくる */
.running-bottomLine.from-right:hover::after{
transform-origin: right top;
transform: scale(1, 1);
}
/* 左へ走っていく */
.running-bottomLine.to-left::after{
transform-origin: left top;
}
/* 右から走ってくる */
.running-bottomLine.to-right::after{
transform-origin: right top;
}説明
from-leftとfrom-leftが走ってくる方向、to-rightとto-leftが走り去る方向です。
CSSで固定にしてもよかったのですが、簡単に変更できた方がいいかと思い作りました。
transform-originは変化が起こる起点を設定するもので、:hoverでは走ってくる方向、::afterでは走り去る方向を起点としています。
スマホ表示対応
@media screen and (max-width: 600px){
.running-bottomLine::after{
transform: scale(1, 1);
}
}説明
当サイトは特別な理由がない限り600pxまでをスマホとしてます。
今回スマホの場合は:hoverがないだろうとして、線が走らない代わりに変化後が既定となるようにしています。
