SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【CSS3】くるくる回る星(マウスオーバーで)

問題

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

star

答え

星は、文字、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現在)

関連するメモ

コメント