【CSS3】くるくる回る星

問題

くるくる回る星ください！

答え

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

★

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

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

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

@keyframes twinklestar {
    0% {transform: rotate(0deg);}
    80% {transform: rotate(1440deg);}
    100% {transform: rotate(1440deg);}
}
.mawaru-hoshi {
    animation-name: twinklestar;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    display:inline-block;
}

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

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

★

回ります！

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

メモ

マウスが乗ったら回るといったことをしたい場合は、transition を使うこと。