コピペで簡単!背景色や文字色をマウスオーバーでふわっと切り変える方法

マウスオーバーでふわっと切りかえる






マウスをボタンに重ねた時にふわっと切り変わるマウスオーバーエフェクト。
自分が初心者の時は「お〜すげぇ〜」って意味もなく感動してた記憶があります(笑)

知ってしまえば難しくないのですが、それでもWEB初心者の方にとっては敷居が高い思うので、jQueryを使わずにCSSだけで実装可能な「ふわっと変わるマウスオーバーエフェクト」を紹介したいと思います。

CSSだけで背景色をふわっと切り変える

下記のサンプルにマウスを重ねてみてください。

マウスを重ねてください

マウスを重ねると、背景色がふわっと変わりますね。

通常、マウスを重ねた時のスタイルは :hover 擬似要素で指定しますが、:hover にスタイルを指定しただけだと背景色が単純に切り変わるだけなので、ふわっと変わるようにCSSにアニメーション的な指定を追加します。

アニメーションというと難しく聞こえますが、jQueryを使わずにCSSにコピペするだけで簡単に実装できちゃいます。

ちなみに「マウスオーバーって何?」という方は、過去記事でマウスオーバーについて解説していますので、参考にしてみてください。

CSSの擬似クラスで実装!マウスオーバー効果【初心者向け】

2017.08.26

マウスオーバー時の背景色を指定する

htmlは特に変わった部分はありません。背景色を変えたい要素にクラスを追加します。

htmlで追加したクラスに好みの背景色を設定して:hover 疑似クラスにマウスオーバー時の背景色を指定します。

CSSに「transition」プロパティを追加する

マウスオーバーした時の色を指定しても単純に色が変化するだけなので、ふわっと変わるように transition プロパティを追加します。

transition プロパティは「遷移」を意味し、要素の2つの状態間の変化を定義することができます。変化前と変化後の間を自動で補完して、表示してくれるプロパティと言えばわりやすいでしょうか。

今回のサンプル場合は、背景色がシアンからマゼンタに変化するまでの中間色を transition プロパティが自動で表示してくれるので、アニメーションしているように見えるわけです。

上記の記述では transition: all 0.3s ease 0.3s の部分で速度を指定しているので、値を増減すると遷移する速度が変わります。1s が1秒なので、上記の場合は0.3秒で背景色が変わるということですね。

all で変化を適用できるプロパティ全てを対象としているので、複数のプロパティの変化に効果を付加する事が可能です。ease は変化の方法を指定してまして、 今回紹介したふわっと変わる効果は ease のおかげなのです。




文字の色やサイズもふわっと変更できる

マウスオーバーで変更可能なプロパティは、transition プロパティが適用できるので、文字の色や大きさ、パディングや行間もアニメーションさせることが可能です。
その場合、複数のプロパティの値を変更するとちょっとした動きをつける事ができます。

マウスを重ねてください

複数のプロパティを同時に変更する

上記のサンプルでは、背景色・文字サイズ・パディングを同時に変更しています。どちらかと言うと「ふわっと」ではなく「にゅい」って感じですけど。

まとめ

アニメーション的な効果は「jQueryを使わないとできないのでは?」と思うWEB初心者の方がいらっしゃると思いますが、意外とCSSで出来るアニメーション効果もあるんですよね。ちょっとしたポイントで使うとそれっぽく見えるので、WEB初心者の方には特にオススメですよ!。

「コピペで簡単!背景色や文字色をマウスオーバーでふわっと切り変える方法」でした。

複雑なマウスオーバーエフェクトが3分で実装可能な「Hover.css」が便利

2018.06.21






マウスオーバーでふわっと切りかえる