【超簡単】ホバーで回転して色が変わるエフェクト！【CSS】

2020年8月17日 39秒

ラク

こんにちは！ラクです。

この記事では、「回転しながら色が変わるホバーエフェクト」を紹介します！

超簡単で、誰でも真似できるので是非読んできださい！！

回転しながら色が変わるホバーエフェクト

では、完成形をみてください。

どうですか？簡単すぎず、難しすぎず、なかなか良さげなエフェクトでしょ？（圧）

では、簡単に解説していきます！

特に難しい箇所はないので、「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倍にしています！！

ホバーエフェクトは、アイデア次第でとても素晴らしいエフェクトにできるので、皆さんもオリジナルのエフェクトを作ってみてください！