效果图
css
.xin{
position: absolute;
width: 3rem;
height: 3rem;
//动画持续时间
animation:rotateImg 5s;
//动画播放次数 infinite:无数次;
animation-iteration-count:infinite;
-webkit-animation:rotateImg 5s;
-webkit-animation-iteration-count: infinite;
}
@keyframes rotateImg {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rotateImg {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}
html
<image class="xin" src="./images/aixin.png"></image>
这里主要是用到CSS3的@keyframes 规则来创建动画,更多效果参考菜鸟教程