css3来回摆动

//1、利用js控制
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); }
}

你可能感兴趣的:(css)