您的位置：首页 > Web前端 > CSS

css3来回摆动

2016-01-06 10:48 375 查看 
//1、利用js控制
<!DOCTYPE html>
<html>

<head>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script>
var i=0;
$(document).ready(function(){
setInterval('gaibian()',1000);
});
function gaibian(){
if(i==0){
i=1;
$("#wo").removeClass("zhuan_left");
$("#wo").addClass("zhuan_right");
}else{
i=0;
$("#wo").addClass("zhuan_left");
$("#wo").removeClass("zhuan_right");
}

}
</script>
<style>
.zhuan_left{
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.zhuan_right{
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}

img {
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}
</style>
<style>
div{
height: 120px;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
</head>
<body>
<div><img id='wo' src="img/1.jpg" style="width: 100%;"/></div>
</body>

</html>
//2、利用css3动画
#hand{-webkit-animation:swinging 2s ease-in-out 0s infinite;-moz-animation:swinging 2s ease-in-out 0s infinite;animation:swinging 2s ease-in-out 0s infinite;-webkit-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;transform-origin: 50% 100%;}@-webkit-keyframes swinging{0% { -webkit-transform: rotate(10deg); }50% { -webkit-transform: rotate(-10deg); }100% { -webkit-transform: rotate(10deg); }}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航