首页 > 代码库 > js 控制 css3高级运动 keyframes

js 控制 css3高级运动 keyframes

2024-08-15 22:41:46   216人阅读

 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


联系
我们