码迷,mamicode.com
首页 > Web开发 > 详细

css3高级运动keyframes

时间:2016-11-07 07:39:00      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:pen   end   charset   doc   type   tle   transform   nim   log   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
            window.onload=function(){
                var arr=[-45,60,-75,90];
                var i=0;
                box.onclick=function(){
                var ready=false;
                i++;
                var oH=document.getElementsByTagName(‘head‘)[0];
                var oS=document.createElement(‘style‘);
                oH.appendChild(oS);
                  oS.innerHTML=
                    ‘@keyframes rotate{‘+
                    ‘0%{‘+
                    ‘transform: rotate(‘+arr[i%4]+‘deg);‘+
                    ‘}‘+
                    ‘100%{‘+
                    ‘transform: rotate(-‘+arr[i%4]+‘deg);‘+
                    ‘}‘+
                    ‘}‘;
                box.style.animation=‘1s rotate linear‘;    
                box.addEventListener(‘animationend‘,function(){
                    if(ready)return;
                    ready=true;
                    document.getElementsByTagName(‘head‘)[0].removeChild(oS);
                },false);
                console.log(oS.innerHTML);
                };

            };
    </script>
</head>
<body>
    <div id="box" style="background:red; width:100px; height:100px; margin:50px auto;"></div>
</body>
</html>

  

css3高级运动keyframes

标签:pen   end   charset   doc   type   tle   transform   nim   log   

原文地址:http://www.cnblogs.com/jasonwang2y60/p/6037033.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!