上个效果图
首先这是一张静态的 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秒 完成一次循环