动画css ---无限旋转

前言：

接口返回数据，处理数据后，需要根据状态显示对应的图片

如果是状态为运行中，图片对应的icon图片需要沿中心点旋转起来（加一个带有旋转的class类）

图片素材

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>旋转</title><style>/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/@-webkit-keyframes changeright{       0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);}100%{-webkit-transform:rotate(360deg);}}/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/@-webkit-keyframes changeleft{0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(-180deg);}100%{-webkit-transform:rotate(-360deg);}}/*-------------------------*/.logo1 img{-webkit-animation:changeright 6s linear infinite;}/*-------------------------*/.logo2 img{-webkit-animation:changeleft 6s linear infinite;}/*---------自定义普通旋转类（就是引用刚才自定义changeright的动画）------*/.imgrotate_common{-webkit-animation:changeright 6s linear infinite;}/*---------自定义快速旋转（就是引用刚才自定义changeright的动画）------*/.imgrotate_rotate{-webkit-animation:changeright 3s linear infinite;}.box span{display: inline-block;vertical-align: middle;   margin: 0 12px;             }</style></head><body><div class="logo1"><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /></div><hr /><div class="logo2"><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /></div><hr /><h3>(模拟接口返回数据)根据状态显示不同动画效果</h3><div class="box"><span></span><span><img src=""/></span></div><script src="jquery.min.js"></script><script>
//          适用场景----根据状态显示不同类型
//          假装是接口返回的数据var arr = [{choose:"禁止",type:0},{choose:"普通",type:2},{choose:"快速",type:3}]var shtml='';if(arr && arr.length>0){for(var i=0,len=arr.length;i<len;i++){if(arr[i].type == 2){shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_common" src="logo_logo.png"/></span>';}else if(arr[i].type == 3){shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_rotate" src="logo_logo.png"/></span>';}else{shtml+='<span>'+arr[i].choose+'</span><span><img src="logo_logo.png"/></span>';}}$('.box').html(shtml);}</script></body>
</html>

动画css ---无限旋转相关推荐

animation的使用-css无限旋转
<!DOCTYPE html> <html> <head> <title>animation-无限旋转</title> <style ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
css光盘转动,CSS 实现加载动画之五-光盘旋转
CSS 实现加载动画之五-光盘旋转今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分 ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
html翻牌动画效果,css实现旋转翻牌动画效果
css动画之旋转翻牌效果,具体内容如下所示: 1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置例子如下: .box { height: 300px; width: 300 ...
css 无限循环旋转
@keyframes rotate{0%{transform: rotate(0);}50%{transform:rotate(200deg);}100%{transform: rotate(0);} ...

动画css ---无限旋转

动画css ---无限旋转相关推荐

最新文章

热门文章