【CSS3】くるくる回る星（マウスオーバーで）

Tweet

Category css 2015/06/14

問題

くるくる回る星ください！マウスオーバーで！

答え

星は、文字、Webフォント、画像……、何らかの手段でご用意ください。

Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。

<span class="glyphicon glyphicon-star"></span>

マウスオーバー時に回転のアニメーションをするCSSの例は以下のようになります。

.mawaru-hoshi {
	transition: transform 500ms ease;  
}
.mawaru-hoshi:hover {
	transform: rotate(180deg);
}

HTMLの方は、.mawaru-hoshi のクラスを付与すると、

<span class="glyphicon glyphicon-star mawaru-hoshi"></span>

回ります！

細かいアニメーションの動きは、CSSのパラメータを調整されたし。

メモ

ずっと動かしたい場合は、animation を使うこと。

chromeでは360度以上を指定しても1周以上回転するが、firefoxでは360度以上を指定するとやや動きが違うようだ（2015/06/14現在）