マウスをボタンに重ねた時にふわっと切り変わるマウスオーバーエフェクト。
自分が初心者の時は「お〜すげぇ〜」って意味もなく感動してた記憶があります（笑）
知ってしまえば難しくないのですが、それでもWEB初心者の方にとっては敷居が高い思うので、jQueryを使わずにCSSだけで実装可能な「ふわっと変わるマウスオーバーエフェクト」を紹介したいと思います。
目次
CSSだけで背景色をふわっと切り変える
下記のサンプルにマウスを重ねてみてください。
マウスを重ねると、背景色がふわっと変わりますね。
通常、マウスを重ねた時のスタイルは :hover 擬似要素で指定しますが、:hover にスタイルを指定しただけだと背景色が切り変わるだけなので、ふわっと変わるようにCSSにアニメーション的な指定を追加します。
アニメーションというと難しく聞こえますが、jQueryを使わずにCSSにコピペするだけで簡単に実装できちゃいます。
マウスオーバー時の背景色を指定する
h背景色を変えたい要素にクラスを追加します。
1 | <div class="sample">サンプルテキスト</div> |
htmlで追加したクラスに好みの背景色を設定して：hover 疑似クラスにマウスを重ねた時の背景色を指定します。
1 2 3 4 5 6 7 8 | /* 通常時の背景色 */ .sample { background-color: #b1eeff;; } /* マウスオーバー時の背景色 */ .sample:hover { background-color: #ffc9d7; } |
CSSに「transition」プロパティを追加する
CSSでマウスオーバーした時の色を指定しても単純に色が変化するだけなので、ふわっと変わるように transition プロパティを追加します。
transition プロパティは「遷移」を意味し、要素の2つの状態間の変化を定義できます。
変化前と変化後の間を自動で補完して、表示してくれるプロパティと言えばわりやすいでしょうか。
今回のサンプル場合は、背景色がシアンからマゼンタに変化するまでの中間色を transition プロパティが自動で表示してくれるので、アニメーションしているように見えるわけです。
1 2 3 4 5 6 7 8 9 10 | .sample { background-color: #b1eeff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .sample:hover { background-color #ffc9d7; } |
上記の記述では transition: all 0.3s ease の 0.3s の部分で速度を指定しているので、値を増減すると遷移する速度が変わります。1s が1秒なので、上記の場合は0.3秒で背景色が変わるということですね。
all で変化を適用できるプロパティ全てを対象としているので、複数のプロパティの変化に効果を付加する事が可能です。ease は変化の方法を指定してます。
文字の色やサイズもふわっと変更できる
マウスオーバーで変更可能なプロパティは、transition プロパティが適用できます。
つまり、背景色以外にも、文字の大きさパディングや行間もアニメーションさせることが可能です。
複数のプロパティの値を変更するとちょっとした動きをつける事ができます。
複数のプロパティを同時に変更する
上記のサンプルでは、背景色・文字サイズ・パディングを同時に変更しています。
どちらかと言うと「ふわっと」ではなく「にゅい」って感じですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .sample { background-color: #b1eeff; padding: 10px; font-size: 18px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .sample:hover { background-color: #ffc9d7; padding: 25px; font-size: 24px; } |
まとめ
アニメーション的な効果は「jQueryを使わないとできないのでは？」と思う方も多いと思いますが、意外とCSSで出来るアニメーション効果もあるんですよね。
ちょっとしたポイントで使うとそれっぽく見えるのでオススメです！。
「コピペで簡単！背景色や文字色をマウスオーバーでふわっと切り変える方法」でした。
