css3动画2 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body, div, ul, li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -o-box-sizing: border-box
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: ".";
            display: block;
            visibility: hidden;
            clear: both;
            width: 0;
            height: 0;
        }

        .outer {
            width: 500px;
            height: 300px;
            margin: 20px auto 0;
            overflow: hidden;
        }

        /* ul{list-style:none;width:500px;height:30px;}
         li{float:left;cursor:pointer;width:100px;text-align:center;height:30px;line-height:30px;border:1px solid red;border-bottom:none;margin-left:20px;border-top-left-radius:8px;border-top-right-radius:8px;}
         li.active{background:red;color:#fff;}
         .outer div{width:500px;height:270px;border:1px solid red;text-align:center;line-height:270px;font-size:28px;}
         .outer div.active{background:red;color:#fff;display:block;}*/
        /*        input[type="email"]:optional{background:blue;}
                input[type="email"]:valid{color:green;}
                input[type="email"]:invalid{color:red;}*/
        /* input[type="number"]:in-range{color:green;}
         input[type="number"]:out-of-range{color:red;}
         div~p{background:red;}
         div:before{content:none;}
         h3:before{content: open-quote}
         h3:after{content:close-quote}
         h3{text-shadow:2px 2px 2px red,5px 5px 5px green,10px 10px 10px #ff2;font-stretch:extra-expanded;-webkit-font-stretch:extra-expanded}
 */
        div {
            width: 100px;
            height: 100px;
            background: green;
            margin: 20px auto;
            animation: myH 5s linear 0s infinite;
            -webkit-animation:myH 5s linear 0s infinite;
            -moz-animation:myH 5s linear 0s infinite;
            -ms-animation:myH 5s linear 0s infinite;
            -o-animation:myH 5s linear 0s infinite;
        }
        @keyframes myH{
            0%{transform:rotate(30deg) translateX(10px) skewX(10deg) scale(0.5);}
            50%{transform:rotate(90deg) translateX(20px) skewX(20deg) scale(1);}
            100%{transform:rotate(180deg) translateX(30px) skewX(30deg) scale(1.5);}
        }
        @-webkit-keyframes myH{
            0%{-webkit-transform:rotate(30deg) translateX(10px) skewX(10deg) scale(0.5);}
            50%{-webkit-transform:rotate(90deg) translateX(20px) skewX(20deg) scale(1);}
            100%{-webkit-transform:rotate(180deg) translateX(30px) skewX(30deg) scale(1.5);}
        }
        @-moz-keyframes myH{
            0%{-moz-transform:rotate(30deg) translateX(10px) skewX(10deg) scale(0.5);}
            50%{-moz-transform:rotate(90deg) translateX(20px) skewX(20deg) scale(1);}
            100%{-moz-transform:rotate(180deg) translateX(30px) skewX(30deg) scale(1.5);}
        }
        @-ms-keyframes myH{
            0%{-ms-transform:rotate(30deg) translateX(10px) skewX(10deg) scale(0.5);}
            50%{-ms-transform:rotate(90deg) translateX(20px) skewX(20deg) scale(1);}
            100%{-ms-transform:rotate(180deg) translateX(30px) skewX(30deg) scale(1.5);}
        }
        @-o-keyframes myH{
            0%{-o-transform:rotate(30deg) translateX(10px) skewX(10deg) scale(0.5);}
            50%{-o-transform:rotate(90deg) translateX(20px) skewX(20deg) scale(1);}
            100%{-o-transform:rotate(180deg) translateX(30px) skewX(30deg) scale(1.5);}
        }
    </style>
</head>
<body>
<div>123321</div>
</body>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript">
    /*   $(function(){
     var inter=0;
     $(".c1").one("click",function(){
     inter++;
     $(this).html("我被点击了("+inter+")次");
     })
     })*/
    /*    $(function(){
     var $div1=$("#div1");
     var $div2=$("div2");
     $div1.bind("click",function(){
     $div1.slideToggle(3000,function(){
     $div2.slideToggle(3000);
     })
     });
     $div2.bind("click",function(){
     $div2.slideToggle(3000,function(){
     $div1.slideToggle(3000);
     })
     })
     })*/
    /*
     $(function(){
     $("div").each(function (index) {
     switch (index) {
     case 0:
     $(this).fadeTo(3000, 0.2);
     break;
     case 1:
     $(this).fadeTo(3000,0.5);
     break;
     case 2:
     $(this).fadeTo(3000,0.8);
     break;
     case 3:
     $(this).fadeTo(3000,1);
     }
     });
     */
    /* var outer=document.getElementsByClassName("outer")[0];
     var oLis=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
     var oDiv=outer.getElementsByTagName("div");
     for(var i=0;i<oLis.length;i++){
     oLis[i].index=i;
     oLis[i].onclick=function(){
     for(var i=0;i<oLis[i].length;i++){
     oLis[i].className="";
     oDiv[i].style.display="none";
     }
     this.className="active";
     oDiv[this.index].style.display="block";
     }
     }*/
    /* $("ul li").bind("click",function(){
     $(this).addClass("active").siblings().removeClass("active");
     $(".outer>div").eq($(this).index()).show().siblings().hide();
     })*/
    /*    $("p").empty();*/
</script>
</html>

 

posted @ 2016-08-08 16:33  dongxiaolei  阅读(70)  评论(0)    收藏  举报