旋转效果
开发工具:DW
内容关于:css3旋转动画
作者:曾震宇
撰写时间:2019.1.18
这是一个CSS3完成的360度不断旋转的动画。
用 @keyframes 创建一个动画zero。 从0%的 0度(odeg) 到100%的360度(360deg)。
然后在在元素里面用annimation引用这个类zero 。1.5s的播放完成时间 infinite(不停止) linear(匀速)
这里是引用
这样就可以让图片不停的转动了
<style>
.img{
animation:zero 5s infinite linear;
}
@keyframes zero{
0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }
}
</style>
div 或图片随意
<div>
<img src="" class="img">
</div>
可以搭配其他使用更加美观