我的屏幕左上方有一个星形图像想要连续旋转.所以任何人都可以告诉我如何让图片连续旋转浏览器Mozilla Firefox,Google Chrome！？
[Css位置类型为’绝对’且图像分辨率：25 * 25]
[Css位置类型为’绝对’且图像分辨率：25 * 25]
解决方法
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
img.star {
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
添加-moz-transform / animation,-ms-transform / animation等规则以支持其他浏览器.
你也可以制作动画GIF :).
更新
(对于反向旋转,从’从’和’到’翻转)
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img.star {
animation-name: rotate;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
速记：
img.star {
animation: rotate 0.5s infinite linear;
}
