狼読

 
2020/03/12

hoverした時に徐々に文字の色を変えよう

hoverしたときに、文字の色が変わる方法について今回は書かせていただきます。考え方は非常にシンプルです。通常時の色の設定とhoverしたときの文字の色を設定をcssに記述するだけです。ただ今回は、徐々に変化するということで、そこに色が変化するまでの時間を記述する必要があります。

htmlの構造

今回は、hoverしたときの色の変わり方の時間変化を見るために3つの文字を出力するhtmlを用意します。

<div class="moji_color_1">文字の色が変わるのに1秒かかります。</div>
<div class="moji_color_2">文字の色が変わるのに5秒かかります。</div>
<div class="moji_color_3">文字の色が変わるのに10秒かかります。</div>

上記の3つのclassにcssを当てていこうと思います。

cssのご紹介

上記のhtml構造に対して、cssを当てていこうと思います。
時間変化については、transitionを使用します。これを使うことで、hoverしたときとしてないときの変化時間をコントロールすることができます。

<style>
.moji_color_1,
.moji_color_2,
.moji_color_3{
 color:#000;
}
.moji_color_1:hover,
.moji_color_2:hover,
.moji_color_3:hover{
 color:#f00;
}
.moji_color_1,
.moji_color_1:hover{
 transition:1s all;
}
.moji_color_2,
.moji_color_2:hover{
 transition:5s all;
}
.moji_color_3,
.moji_color_3:hover{
 transition:10s all;
}
</style>

文字にマウスを当てて見てください。1秒は非常に早く色が変わるかと思いますが、5秒、10秒を色が変わるまでに長いと感じると思います。色が変わるまでマウスを文字から動かさないようにしてください。

サンプルコードの実装例

文字の色が変わるのに1秒かかります。
文字の色が変わるのに5秒かかります。
文字の色が変わるのに10秒かかります。

上記のように、文字の色が変わる時間をコントロールできるようになりました。

まとめ

今回は、cssを使って文字の色が徐々に変わる方法をご紹介させていただきました。この徐々に変わる方法は応用の幅が非常にきくオプションなので、ぜひいろんなところで応用して見てください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読