标签：
刚要睡觉,猛然扫到了QQ电脑管家的这个东西....
心理痒痒的...没办法,只能做出来再去睡了
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #box{ position:relative; margin:200px auto; width:220px; height:220px; border:1px solid #ccc; } #box span{ width:1px; background-color:#c06; display:block; position:absolute;-webkit-transition:all 1s; left:50%; top:50%;} #box.hover span{ -webkit-transform:rotate(0deg)} </style> <script> window.onload = function (){ var oBox = document.getElementById("box"); var r = 100; var height = Math.PI * 2 * r / 72; for( var i=0; i< 72 ; i++ ){ var oSpan = document.createElement("span"); var deg = 5 * i ; var pideg = deg * Math.PI / 180; oSpan.style.height = height + "px"; oSpan.style.webkitTransform = "translate( " + (Math.cos(pideg)*r).toFixed(2) + "px," + (Math.sin(pideg)*r).toFixed(2)+"px)" + "rotate(" + (deg) + "deg)"; oBox.appendChild(oSpan) } var aSpan = oBox.getElementsByTagName("span"); oBox.onmouseover = function (){ for( var i=0; i<aSpan.length; i++ ){ var deg = 5 * i ; var pideg = deg * Math.PI / 180; aSpan[i].style.webkitTransform = "translate( " + (Math.cos(pideg)*r).toFixed(2) + "px," + (Math.sin(pideg)*r).toFixed(2)+"px)" + "rotate(" + (deg - 90) + "deg)"; } } oBox.onmouseout = function (){ for( var i=0; i<aSpan.length; i++ ){ var deg = 5 * i ; var pideg = deg * Math.PI / 180; aSpan[i].style.webkitTransform = "translate( " + (Math.cos(pideg)*r).toFixed(2) + "px," + (Math.sin(pideg)*r).toFixed(2)+"px)" + "rotate(" + (deg) + "deg)"; } } } </script> </head> <body> <div id="box"></div> </body> </html>
方法不封装了,竖线分块旋转也再说吧.... 困了zzzZZZ
标签：
原文地址：http://www.cnblogs.com/liqingchang/p/4436465.html
