css画钟表_css3实现钟表效果

left:96px;top:40px; background-color:black;transform-origin: center 60px;box-shadow:0 0 10px rgba(0,0,0,0.8);}　　　　 　　　　 .min{width:6px;height:70px;border-radius:3px;position:absolute;left:97px;top:30px;background-color:#2b2b2b;transform-origin: center 70px;box-shadow:0 0 10px rgba(0,0,0,0.6);} 　　　　 　　　　 .sec{width:4px;height:80px;border-radius:2px; position:absolute;left:98px;top:20px;background-color:red;transform-origin: center 80px;box-shadow:0 0 10px rgba(255,0,0,0.5);}

.center{width:16px;height:16px;box-shadow:0 2px 5px rgba(0,0,0,0.5); border-radius:50%;position:absolute;left:92px;top:92px;background-image: radial-gradient(white,gray);}

window.onload = function(){

var oUl = document.getElementById("tickBox");

var oStyle = document.getElementById("style");

var liStr = "";

var styleStr = "";

for(var i=0;i<60;i++){

styleStr += '.clock ul li:nth-of-type('+(i+1)+'){transform: rotate('+i*6+'deg);}';

liStr += '

';

}

oStyle.innerHTML += styleStr;

oUl.innerHTML = liStr;

var oHour = document.getElementById("hour");

var oMin = document.getElementById("min");

var oSec = document.getElementById("sec");

function getTime(){

var timer = new Date();

var sec = timer.getSeconds();

var min = timer.getMinutes();

var hour = timer.getHours();

var tranS = sec*360/60;

var tranM = (min+sec/60)*360/60;

var tranH = (hour + min/60)*360/12;

oSec.style.transform = 'rotate('+tranS+'deg) translateZ(-1px)';

oMin.style.transform = 'rotate('+tranM+'deg) translateZ(-1px)';

oHour.style.transform = 'rotate('+tranH+'deg) translateZ(-1px)';

}

setInterval(getTime,1000);

getTime();

}