標籤：
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
