今回作りたいもの テキストにグラデーションで下線を引き、マウスオーバーでグラデーションが縦方向に伸びる動きをつけたいと思います。 HTMLの準備 表示したいテキストを自由に書きます。 今回は、h1タグとpタグでそれぞれ書きました。 タグは自由です。divでもh2でも。
|
1 2 |
<h1>All their equipment and <span class="underline">instruments</span> are alive.</h1> <p>All their equipment and instruments are alive. All their <span class="underline">equipment and instruments</span> are alive. All their equipment and instruments are alive.</p> |
下線を引きたいテキスト部分にクラス名をつけます。 ここでは class=”underline” としました。 クラス名も自由です。 テキストにCSSで下線を引く テキストにグラデーションの下線を引くには background を利用します。
|
1 2 3 4 5 6 |
.underline { background-image: linear-gradient(120deg, #5cedff 0%, #f096ff 100%); background-repeat: no-repeat; background-size: 100% 0.4em; background-position: 0px 90%; } |
1. 背景色はlinear-gradientを使用し、中身は(角度, 開始色 開始位置, 終了色 終了位置)となっています。 今回は120度の角度で、テキストの頭（0%の位置）を水色に、テキストの最後（100%の位置）を紫にしています。 2. background-repeatは、今回は繰り返さないのでなしにしています。 ここまでの2つで、テキストに対し、高さいっぱいのグラデーションができました。↓↓↓ 3. 下線っぽくするには、background-sizeで高さを調整します。 background-sizeは(横のサイズ 縦のサイズ)となっているので、 今回は(横100% 高さ0.4em)としています。 ここでは単位は%, emのほか、pxも使用できます。 ここまでの1〜3で、上から下線ができました。↓↓↓ 4. 最後に、テキストの下に下線を引きたいので、background-positionで位置を調整します。 background-positionは(左からの開始位置 上からの開始位置)となっており、 今回は(左から開始 上は90%の位置から開始)としています。 これも単位は%やpxなどを使用できます。 動きをつけよう せっかくなので、下線部分のテキストにマウスオーバーしたら、下線が広がる動きをつけます。
|
1 2 3 |
.underline:hover { background-size: 100% 90%; } |
ホバー時に、background-sizeの高さの方を90%にします。（100%でもいいですよ。） するとこんな感じ↓↓↓ カクカクした感じになるので、これをスムーズにするにはtransitionを使用します。 transitionは動きをスムーズにできる underlineにcssでtransitionを設定追加します。
|
1 2 3 |
.underline:hover { transition: background-size 0.25s ease-in; } |
ここではbackground-sizeに0.25秒かけて高さを90%まで広げる命令です。 ＊0秒だと、さっきのカクカクした動作。 そして完成。 […]
