css做钟表,使用css3做钟表

.wrap{width:200px;height:200px;border:2px solid #000;border-radius:50%;margin:100px auto;position:relative;}li{position:absolute;width:2px;height:5px;top:0;left:99px;background:#000;-webkit-transform-origin:center 100px;}

/*li:nth-child(1){-webkit-transform: rotate(0deg);}

li:nth-child(2){-webkit-transform: rotate(6deg);}

li:nth-child(3){-webkit-transform: rotate(12deg);}

li:nth-child(4){-webkit-transform: rotate(18deg);}

li:nth-child(5){-webkit-transform: rotate(24deg);}

li:nth-child(6){-webkit-transform: rotate(30deg);}*/li:nth-child(5n+1){height:10px;}#hour{width:6px;height:40px;background:#000;position:absolute;left:97px;top:60px;-webkit-transform-origin:bottom;}#min{width:4px;height:60px;background:#999;position:absolute;left:98px;top:40px;-webkit-transform-origin:bottom;}#sec{width:2px;height:70px;background:#f00;position:absolute;left:99px;top:30px;-webkit-transform-origin:bottom;}.ico{width:10px;height:10px;background:#000;position:absolute;top:95px;left:95px;border-radius:50%;}

window.οnlοad=function(){varoUl=document.getElementById("list");varoCss=document.getElementById("css");varoHour=document.getElementById("hour");varoMin=document.getElementById("min");varoSec=document.getElementById("sec");varaLi=‘‘;varsss=‘‘;for(vari=0;i<60;i++){

aLi+="

";

sss+=‘li:nth-child(‘+(i+1)+‘){-webkit-transform: rotate(‘+i*6+‘deg);}‘}

oUl.innerHTML=aLi;

oCss.innerHTML+=sss;functiontoTime(){vardate=newDate();varmySec=date.getSeconds();varmyMin=date.getMinutes()+mySec/60;

varmyHour=date.getHours()+myMin/60;

oHour.style.webkitTransform=‘rotate(‘+myHour*30+‘deg)‘;

oMin.style.webkitTransform=‘rotate(‘+myMin*6+‘deg)‘;

oSec.style.webkitTransform=‘rotate(‘+mySec*6+‘deg)‘;

}

toTime();

setInterval(toTime,1000);

}