html图片自动旋转

效果图

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 规则来创建动画，更多效果参考菜鸟教程

CSS3动画