【CSS3】くるくる回る星

Tweet

Category css 2015/06/15

問題

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

答え

星は、文字、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;
}

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

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

回ります！

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

メモ

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