首页 > 代码库 > js 控制 css3高级运动 keyframes
js 控制 css3高级运动 keyframes
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var arr=[-45,60,-75,90]; 9 var i=0;10 box.onclick=function(){11 var ready=false;12 i++;13 var oH=document.getElementsByTagName(‘head‘)[0];14 var oS=document.createElement(‘style‘);15 oH.appendChild(oS);16 oS.innerHTML=17 ‘@keyframes rotate{‘+18 ‘0%{‘+19 ‘transform: rotate(‘+arr[i%4]+‘deg);‘+20 ‘}‘+21 ‘100%{‘+22 ‘transform: rotate(-‘+arr[i%4]+‘deg);‘+23 ‘}‘+24 ‘}‘;25 box.style.animation=‘1s rotate linear‘; 26 box.addEventListener(‘animationend‘,function(){27 if(ready)return;28 ready=true;29 document.getElementsByTagName(‘head‘)[0].removeChild(oS);30 },false);31 console.log(oS.innerHTML);32 };33 34 };35 </script>36 </head>37 <body>38 <div id="box" style="background:red; width:100px; height:100px; margin:50px auto;"></div>39 </body>40 </html>
js 控制 css3高级运动 keyframes
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。