
ラク
こんにちは!ラクです。
この記事では、「回転しながら色が変わるホバーエフェクト」を紹介します!
超簡単で、誰でも真似できるので是非読んできださい!!
目次
回転しながら色が変わるホバーエフェクト
では、完成形をみてください。
See the Pen Hover Effect #2 by ラク (@raku_gurafiri) on CodePen.
どうですか?簡単すぎず、難しすぎず、なかなか良さげなエフェクトでしょ?(圧)
では、簡単に解説していきます!
簡単に解説
特に難しい箇所はないので、「div:hover」の部分だけ解説します。
div:hover {
background: #1d9eeb;
color: #fff;
border-radius: 50%;
transform: rotate(360deg) scale(1.2);
}
「background」と「color」で背景色とアイコンの色を逆にしています。
「border-radius」で四角から丸にしています。
そして、最後に「tranform: rotate(360deg);」で一回転させて、「transform: scale(1.2);」で大きさを1.2倍にしています!!
ホバーエフェクトは、アイデア次第でとても素晴らしいエフェクトにできるので、皆さんもオリジナルのエフェクトを作ってみてください!