【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; }
HTMLの方は、.mawaru-hoshi のクラスを付与すると、
<span class="glyphicon glyphicon-star mawaru-hoshi"></span>
回ります!
細かいアニメーションの動きは、CSSのパラメータを調整されたし。
メモ
マウスが乗ったら回るといったことをしたい場合は、transition を使うこと。
コメント