js+css3制作时钟特效

我们先来看看效果图吧

再来奉上源码

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3 钟表</title><style>.clock{position: relative;width: 200px;height: 200px;border-radius: 110px;border: 10px solid #000;margin: 200px auto;}.line1,.line4{position: absolute;background-color: #aaa;width: 10px;height: 200px;left: 50%;margin-left: -5px;}.line2,.line3,.line5,.line6{position: absolute;background-color: #ccc;width: 8px;height: 200px;left: 50%;margin-left: -4px;}.line2{transform: rotate（30deg）;}.line3{transform: rotate（60deg）;}.line4{transform: rotate（90deg）;}.line5{transform: rotate（120deg）;}.line6{transform: rotate（150deg）;}.cover{position: absolute;width: 180px;height: 180px;background-color: #fff;left: 50%;top: 50%;margin: -90px 0 0 -90px;border-radius: 90px;}.dotted{position: absolute;width: 20px;height: 20px;background-color: #000;border-radius: 10px;left: 50%;top: 50%;z-index: 2;margin: -10px 0 0 -10px;}.hour{position: absolute;width: 10px;height: 60px;background-color: #ccc;left: 50%;top: 50%;margin: -60px 0 0 -5px;}.minute{ position: absolute; width: 8px; height: 70px; background-color: #ddd; left: 50%; top: 50%;margin: -70px 0 0 -4px; }.seconds{position: absolute;width: 6px;height: 80px;background-color: red;left: 50%;top: 50%;margin: -80px 0 0 -3px;}.minute,.hour,.seconds{transform-origin: center bottom;}</style><script>window.onload = function （） {var hour = document.querySelector（".hour"）;var minute = document.querySelector（".minute"）;var second = document.querySelector（".seconds"）;var h = 0,m = 0,s = 0,ms =0;setInterval（fn,10）;function fn （） {var date = new Date（）;ms = date.getMilliseconds（）;s = date.getSeconds（）+ms/1000;m = date.getMinutes（）+s/60;h = date.getHours（）%12+m/60;second.style.WebkitTransform = "rotate（"+s*6+"deg）";minute.style.WebkitTransform = "rotate（"+m*6+"deg）";hour.style.WebkitTransform = "rotate（"+h*30+"deg）";}}</script></head><body><div class="clock"><div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="line4"></div><div class="line5"></div><div class="line6"></div><div class="cover"></div><div class="dotted"></div><div class="hour"></div><div class="minute"></div><div class="seconds"></div></div></body></html>

再给大家分享一个网友的作品

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=uft-8"><title>利用JS和CSS3制作的时钟效果</title><style type="text/css">#clock{width:300px;height:300px;border:15px solid #333;position:relative;border-radius:300px;-moz-border-radius:300px;-webkit-border-radius:300px;-o-border-radius:300px;-ms-border-radius:300px;background:#ddd;background:radial-gradient（#fff,#ddd）;background:-moz-radial-gradient（#fff,#ddd）;background:-webkit-radial-gradient（#fff,#ddd）;background:-o-radial-gradient（#fff,#ddd）;background:-ms-radial-gradient（#fff,#ddd）;box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;-moz-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;-webkit-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;-o-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;-ms-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;}.clock-core{width:16px;height:16px;background:#f00;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;z-index:30;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;-o-border-radius:16px;-ms-border-radius:16px;}#clock-h,#clock-m,#clock-s{width:6px;height:70px;background:#333;position:absolute;left:50%;top:50%;margin:-70px 0 0 -3px;z-index:10;transform-origin:50% 100%;-moz-transform-origin:50% 100%;-webkit-transform-origin:50% 100%;-o-transform-origin:50% 100%;-ms-transform-origin:50% 100%;}#clock-m{height:100px;margin-top:-100px}#clock-s{width:2px;height:155px;margin:-135px 0 0 -1px;background:#f00;transform-origin:50% 87.097%;-moz-transform-origin:50% 87.097%;-webkit-transform-origin:50% 87.097%;-o-transform-origin:50% 87.097%;-ms-transform-origin:50% 87.097%;}#clock-h b,#clock-m b{width:0;height:0;font-size:0;border:3px dashed transparent;border-bottom:3px solid #333;position:absolute;left:0;top:-6px}.big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;top:0;margin-left:-2px;transform-origin:50% 0%;-moz-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;-o-transform-origin:50% 0%;-ms-transform-origin:50% 0%;}.small-mark{width:2px;height:5px;background:#999;margin-left:-1px}.big-mark i{font:700 20px/1.5 Arial;position:absolute;left:-100%;top:12px}.c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;top:12px}#clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #ccc;text-align:center;position:absolute;left:50%;bottom:70px;margin:0 0 0 -85px;border-radius:6px}</style><script type="text/javascript">function clock（）{var $=function（id）{return document.getElementById（id）};//写入刻度DOM，以及刻度的定位function mark（）{//圆的半径var r=parseFloat（window.getComputedStyle?window.getComputedStyle（$（"clock"）,null）.width:$（"clock"）.currentStyle["width"]）/2;//插入DOMfor（var i=1;i<61;i++）{$（"clock-mark"）.innerHTML+="<b class="c"+i+""><i></i></b>";var ci=document.getElementsByClassName（"c"+i）[0];var cii=ci.getElementsByTagName（"i"）[0];//利用正弦定理计算刻度的定位ci.style.left=r+r*（Math.sin（i*6*2*Math.PI/360））+"px";/*注意正弦的角度制算法和弧度制算法，Math.sin的参数是弧度制算法，所以先把角度转换成弧度，再计算*/ci.style.top=r-r*（Math.sin（（90-i*6）*2*Math.PI/360））+"px";//计算转动的角度/*other*/ci.style.transform="rotate（"+i*6+"deg）";/*FF*/ci.style.MozTransform="rotate（"+i*6+"deg）";/*webkit*/ci.style.WebkitTransform="rotate（"+i*6+"deg）";/*opera*/ci.style.OTransform="rotate（"+i*6+"deg）";/*ms*/ci.style.msTransform="rotate（"+i*6+"deg）";//大刻度if（i%5==0）{ci.className="c"+i+" "+"big-mark";cii.innerHTML=i/5;}//小刻度else{ci.className="c"+i+" "+"small-mark";ci.removeChild（cii）;}//把数字转正var iRotate=-i*6;cii.style.transform="rotate（"+iRotate+"deg）";cii.style.MozTransform="rotate（"+iRotate+"deg）";cii.style.WebkitTransform="rotate（"+iRotate+"deg）";cii.style.OTransform="rotate（"+iRotate+"deg）";cii.style.msTransform="rotate（"+iRotate+"deg）";}}//指针的转动function turnR（）{var d=new Date（）;var h=d.getHours（）;var m=d.getMinutes（）;var s=d.getSeconds（）;var sRadius=360/60*s;var mRadius=360/60*m;//如果需要分针匀速移动，就赋值var mRadius=360/60*m+360/60/60*svar hRadius=360/12*h+30/60*m;var ch=$（"clock-h"）;var cm=$（"clock-m"）;var cs=$（"clock-s"）;/*other*/ch.style.transform="rotate（"+hRadius+"deg）";cm.style.transform="rotate（"+mRadius+"deg）";cs.style.transform="rotate（"+sRadius+"deg）";/*FF*/ch.style.MozTransform="rotate（"+hRadius+"deg）";cm.style.MozTransform="rotate（"+mRadius+"deg）";cs.style.MozTransform="rotate（"+sRadius+"deg）";/*webkit*/ch.style.WebkitTransform="rotate（"+hRadius+"deg）";cm.style.WebkitTransform="rotate（"+mRadius+"deg）";cs.style.WebkitTransform="rotate（"+sRadius+"deg）";/*opera*/ch.style.OTransform="rotate（"+hRadius+"deg）";cm.style.OTransform="rotate（"+mRadius+"deg）";cs.style.OTransform="rotate（"+sRadius+"deg）";/*ms*/ch.style.msTransform="rotate（"+hRadius+"deg）";cm.style.msTransform="rotate（"+mRadius+"deg）";cs.style.msTransform="rotate（"+sRadius+"deg）";setTimeout（turnR,1000）;}/*显示日期*/function clockDate（）{var d=new Date（）;var week=["日","一","二","三","四","五","六"];$（"clock-date"）.innerHTML=d.getFullYear（）+"年"+（d.getMonth（）+1）+"月"+d.getDate（）+"日"+" 星期"+week[d.getDay（）];}//调用函数mark（）;turnR（）;clockDate（）;}window.onload=clock;</script></head><body><div id="clock"><b class="clock-core"></b><div id="clock-h"><b></b></div><div id="clock-m"><b></b></div><div id="clock-s"></div><div id="clock-mark"></div><div id="clock-date"></div></div></body></html>