css3循环360度图片旋转

版权声明：有用请收藏，转载请注明出处！不做伸手党，谢谢！ https://blog.csdn.net/qq_42221334/article/details/88708693

上个效果图

首先这是一张静态的 png图片 

是通过添加 CSS 样式让图片旋转起来的，不是GIF动态图！

代码如下：

css：

.noDataImg{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
  }

html：

<div class="NoData" v-if="NoData">
   <p>抱歉！未搜到到相关内容。。。</p>
   <img class="noDataImg" src="../../../static/img/nodata.png"/>
</div>

通过创建一个 rotation  的css3 动画 让他 每3秒 完成一次循环