动画CSS---无限旋转

前言：接口返回数据，处理数据后，需要根据状态显示对应的图片如果是状态为运行中，图片对应的icon图片需要沿中心点旋转起来（加一个带有旋转的class类） <!DOCTYPE...

前言：

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

如果是状态为运行中，图片对应的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>

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-14 10:43
阅读 ( 493 )
分类：WEB前端开发

动画CSS---无限旋转

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »