リンクをhoverしたときにゆっくり文字の色が変わる簡単CSS

green-light

マウスカーソルをhoverするとこんな感じにゆっくり色が変わるリンクのCSSです。

transition(英語で移り変わりの意)を使います。

「0.8s」は移り変わるのにかかる秒数(second)です。

背景色も同じ処理で大丈夫です。
ここにマウスカーソルをhoverさせると、こんな感じです

CSS3のおかげで簡単にこういうことができるようになってきました。
こういうのは、隠し味程度に使うのが良いと思いますね。
個人的には、あまりゆっくりすぎないほうが好みです。

西山
西山 寛之(にしやま ひろゆき)
1975年生まれ O型 | 愛媛大学法文学部卒業
レコードショップ運営~大利木材取締役[ ウェブ制作・運用/営業/CTO ]を経て、
2015年4月 パソラボ設立。
投稿日 カテゴリー Blog タグ , .

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です