写的玩玩的，高手勿拍哈
先上图
只支持google浏览器
再上码，有问题的地方还请指出
- HTML code
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>@-webkit-keyframes secondhand{}@-webkit-keyframes minutehand{}@-webkit-keyframes hourhand{}@-webkit-keyframes clockhand{0%{-webkit-box-shadow:3px -3px 6px #ffff00;}50%{-webkit-box-shadow:3px -3px 6px #ff00ff;}}*{ padding:0; margin:0;}#clock{-webkit-border-radius:250px;-webkit-animation-name:clockhand;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-box-shadow:3px -3px 6px #ffff00;}#second{width:4px; height:270px; -webkit-border-radius:2px; background-color: rgba(255,0,0,0.8); border:1px solid black;-webkit-animation-duration:60s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;top:34px;left:248px;-webkit-transform-origin:50% 80%;position:absolute;}#minute{width:12px; height:300px; -webkit-border-radius:6px; background-color: rgba(0,0,0,1); border:1px solid black;-webkit-animation-duration:3600s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;top:10px;left:244px;-webkit-transform-origin:50% 80%;position:absolute;}#hour{width:20px; height:240px; -webkit-border-radius:10px; background-color: rgba(0,0,0,1); border:1px solid black;-webkit-animation-duration:43200s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;top:58px;left:240px;-webkit-transform-origin:50% 80%;position:absolute;}#ct{height:10px;width:10px;-webkit-border-radius:5px;background-color:#000000;position:absolute;top:245px;left:245px;}span{cursor:pointer;-webkit-border-radius:15px;border:1px solid rgba(100,200,300,0.7);display:block;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:24px;color:#3399FF;height:30px;width:30px;position:absolute;text-align:center;-webkit-transition-timing-function:linear;-webkit-transition-duration:0.2s;}span:hover{text-shadow:2px 2px 4px #3399FF;z-index:100;}</style></head><body><div id="clock" style="width:500px;height:500px;"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><div id="hour"></div><div id="minute"></div><div id="second"></div><div id="ct"></div></div><script>(function(){var spans=document.getElementsByTagName("SPAN");for(var length=0;length<spans.length;length++){ spans[length].style.top=485-(250+230*Math.cos((Math.PI/6)*(length+1)))+"px"; spans[length].style.left=235+230*Math.sin((Math.PI/6)*(length+1))+"px"; spans[length].style.webkitTransform="rotate("+((length+1)*30)+"deg)"; spans[length].class=length; spans[length].onmouseover=function(){ this.style.webkitTransform="rotate(360deg) scale(2,2)" }; spans[length].onmouseout=function(){ this.style.webkitTransform="rotate("+((this.class+1)*30)+"deg)"; };}var dateNow=new Date();var seconds=dateNow.getSeconds();var seconddeg=6*seconds;var minutes=dateNow.getMinutes();var minutedeg=6*minutes;var hours=dateNow.getHours();var hourdeg=30*((hours+1)-12)+((minutedeg*30)/360);document.styleSheets[0].cssRules[0].insertRule("0%{-webkit-transform:rotate("+seconddeg+"deg);}");document.styleSheets[0].cssRules[0].insertRule("100%{-webkit-transform:rotate("+(seconddeg+360)+"deg);}");document.styleSheets[0].cssRules[1].insertRule("0%{-webkit-transform:rotate("+minutedeg+"deg);}");document.styleSheets[0].cssRules[1].insertRule("100%{-webkit-transform:rotate("+(minutedeg+360)+"deg);}");document.styleSheets[0].cssRules[2].insertRule("0%{-webkit-transform:rotate("+hourdeg+"deg);}");document.styleSheets[0].cssRules[2].insertRule("100%{-webkit-transform:rotate("+(hourdeg+360)+"deg);}");document.getElementById("second").style.webkitAnimationName="secondhand";document.getElementById("minute").style.webkitAnimationName="minutehand";document.getElementById("hour").style.webkitAnimationName="hourhand";})();</script></body></html>