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

ラク
ラク

こんにちは!ラクです。

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

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

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

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

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倍にしています!!

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

コメントを残す

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