css3来回摆动

最新推荐文章于 2024-06-23 17:26:01 发布

良_123

最新推荐文章于 2024-06-23 17:26:01 发布

阅读量1w

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/helloxiaoliang/article/details/50467390

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

//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); }
}