js旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div{ background: repeating-linear-gradient(45deg,red,yellow 20%); width: 200px; height: 200px; border-radius: 50%; text-align: center; line-height: 200px; animation-name: MX; animation-duration:6s; animation-timing-function:linear; /*动画速度曲线*/ animation-iteration-count:infinite; /*动画无限次播放*/ transition-property: height; /*2b转换需要属性的名称*/ transition-duration: 6s; /*2d转换时间*/ transition-timing-function: linear; /*转换速度曲线*/} @keyframes MX { from{font-size: 0px;color:black;} to{font-size: 80px;color:white;} } /*#ym:hover{ animation-play-state:paused; 停止2d转换 }*/ </style> </head> <body> <script> var x=0; var timerid; var fx; function start(){ clearInterval(timerid) timerid=setInterval(function(){ if(x==0) fx=true if(fx==true) x=x+1; if(x==360) fx=false if(fx==false) x=x-1 document.getElementById("ym").style.transform='rotate(' + x + 'deg)'; },30) } // clearInterval() 方法可取消由 setInterval()函数佘定德定时执行操作。 // clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。 // setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 </script> <!--onmouseover="clearInterval(timerid)" onmouseout="start()"--> <div id="ym" >明</div> <button onclick="start()">开始</button> <button onclick="clearInterval(timerid)">停止</button> </body> </html>
css旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0; margin: 0;} #a{ width:500px; height:500px; margin: 300px auto; transform: translate(-50%,-50%); background: repeating-linear-gradient(60deg,#0ff,#00f,#0f0 10%); border-radius:50%; /*animation:run 6s linear 5s infinite alternate;*/ animation-name: run; animation-duration:6s; animation-timing-function: linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction: /*normal|*/alternate; } #a:hover{ animation-play-state:paused; } p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*利用绝对定位和2d转换进行水平垂直居中*/ } @keyframes run{ from{ transform:rotate(0deg);font-size: 0px;color:black; } to{ transform:rotate(360deg);font-size: 80px;color:white; } } </style> </head> <body> <div id="a"><p>我</P></div> </body>
Document