我想让我的加载图标的CSS旋转.
我有一个图标和以下代码:
<style>
#test {
width: 32px;
height: 32px;
background: url('refresh.png');
}
.rotating {
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 1s;
-webkit-transition-delay: now;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
</style>
<div id='test' class='rotating'></div>
但这不管用.如何使用CSS旋转图标？
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>