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>
时间： 2024-10-27 05:39:02