★CSS3写的简洁动态指针时钟(附带数字/时分秒针)★
请勿抄袭本页面
CSS3动画版时钟特效，本例未使用javascript的setTimeout()及setInterval()，而是利用CSS3动画原理实现的效果。转自源码爱好者
使用方法及注意事项使用前请先阅读本内容
代码需要加载一个较大的JQuery插件，故不建议手机页面添加，且代码兼容性不大好，效果因浏览器而异[代码仅供参考，转载请注明出处]
----Comments(5)----
幻想发财 (@wxb) | at 2014-04-30 04:39:
<style>
.clock{
position:relative;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
width:20em;
height:20em;
border:2px solid #333;
border-radius:10em;
background:#ddd;
}
.clock:before{position:absolute;content:"";width:10%;height:10%;left:50%;top:50%;margin-left:-5%;margin-top:-5%;background-color:#E1E1E1;border-radius:50%;}
@-webkit-keyframes timer{to{-webkit-transform:rotate(360deg);}}
@-moz-keyframes timer{to{-moz-transform:rotate(360deg);}}
@-o-keyframes timer{to{-o-transform:rotate(360deg);}}
@keyframes timer{to{transform:rotate(360deg);}}
.hours{position:absolute;width:0;height:8em;border-left:.3em solid #666;border-right:.3em solid #333;left:9.7em;top:4em;z-index:20px;border-radius:.3em .3em 0 0/10em 10em 0 0;-webkit-transform-origin:50% 6em;-webkit-animation:timer 216000s linear 0 infinite;-moz-transform-origin:50% 6em;-moz-animation:timer 216000s linear 0 infinite;-o-transform-origin:50% 6em;-o-animation:timer 216000s linear 0 infinite;transform-origin:50% 6em;animation:timer 216000s linear 0 infinite;}
.minutes{position:absolute;width:0;height:10em;border-left:.3em solid #666;border-right:.3em solid #333;left:9.7em;top:2em;z-index:20px;border-radius:.3em .3em 0 0/10em 10em 0 0;-webkit-transform-origin:50% 8em;-webkit-animation:timer 3600s linear 0 infinite;-o-transform-origin:50% 8em;-moz-animation:timer 3600s linear 0 infinite;-moz-animation:timer 3600s linear 0 infinite;transform-origin:50% 8em;animation:timer 3600s linear 0 infinite;}
.seconds{
position:absolute;
left:9.9em;
top:1em;
width:.2em;
height:11em;;
background-color:red;
border-radius:.15em .15em 0 0/10em 10em 0 0;
box-shadow:0 0 .1em rgba(0,0,0,0.8);
-webkit-transform-origin:50% 9em;
-webkit-animation:timer 60s steps(60,end) 0 infinite;
-moz-transform-origin:50% 9em;
-moz-animation:timer 60s steps(60,end) 0 infinite;
-o-transform-origin:50% 9em;
-o-animation:timer 60s steps(60,end) 0 infinite;
transform-origin:50% 9em;
animation:timer 60s steps(60,end) 0 infinite;
z-index:30px;
}
.seconds:before{
display:block;
content:"";
position:absolute;
width:.8em;
height:.8em;
background-color:red;
margin:-.4em 0 0 -.3em;
top:9em;
border-radius:.4em;
}
.clock em{
position:absolute;
width:.2em;
height:.6em;
left:50%;
top:0;
margin-left:-.1em;
background-color:#CCC;
-webkit-transform-origin:.1em 10em;
-moz-transform-origin:.1em 10em;
-o-transform-origin:.1em 10em;
transform-origin:.1em 10em;
}
.clock em.em{height:.8em;background-color:#333;}
.clock b{position:absolute;font-size:1.4em;width:1.4em;height:1.4em;left:50%;top:0;line-height:1.4em;margin:-.7em 0 0 -.7em;text-align:center;font-family:Georgia;color:#333;}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
<div class="clock" id="clock">
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
<script>
var clock=document.getElementById("clock"),em=document.createElement("em"),b=document.createElement("b");for(var i=0;i<60;i++){em=em.cloneNode(true);if(i%5){em.className=""}else{em.className="em";b=b.cloneNode(false);b.innerHTML=i/5?i/5:12;b.style.left=Math.cos((i*6-90)*Math.PI/180).toFixed(4)*40+50+"%";b.style.top=Math.sin((i*6-90)*Math.PI/180).toFixed(4)*40+50+"%";clock.appendChild(b)}em.style.transform=em.style.WebkitTransform="rotate("+i*6+"deg)";clock.appendChild(em)}var pts=clock.getElementsByTagName("div"),d=new Date(),s=d.getSeconds()*6,m=d.getMinutes()*6+s/60,h=d.getHours()%12*30+m/12;pts[0].style.WebkitTransform="rotate("+h+"deg)";pts[1].style.WebkitTransform="rotate("+m+"deg)";pts[2].style.WebkitTransform="rotate("+s+"deg)";document.styleSheets[0].insertRule("@-webkit-keyframes hours{to{-webkit-transform:rotate("+(360+h)+"deg);}}",0);document.styleSheets[0].insertRule("@-webkit-keyframes minutes{to{-webkit-transform:rotate("+(360+m)+"deg);}}",0);document.styleSheets[0].insertRule("@-webkit-keyframes seconds{to{-webkit-transform:rotate("+(360+s)+"de
小孩 (@luchaorong) | at 2014-04-30 03:32:
除了有点大
工藤新一 (@gtxy) | at 2014-04-23 13:48:
飘~
45310095 (@453100956) | at 2014-04-14 23:01:
太棒了！！！
幻龙 (@fhl) | at 2014-04-11 02:59:
很好！！
Subscribe | Register | Login | N