超級推薦：css3 clock 簡潔的指針動畫時鐘

2024-09-05 12:19:10

字體：大中小

來源：轉載

供稿：網友

css3動畫版時鐘特效，CSS3 clock比較簡潔的指針時鐘，CSS3電子鐘，電子表。經測試，表現完整的瀏覽器目前只有谷歌、safari及360，IE10未測試。本例未使用javascript的setTimeout()及setInterval(),利用css3動畫原理實現的效果。如看不到動態效果，請升級您的IE8為IE9+瀏覽器，或棄用后改為火狐或Chrome.

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>css3原理制做的動畫指針時鐘</title><style>body{font-sise:62.5%;}.tip{text-align:center;font-size:1.2em;color:#333;}.clock{   position:absolute;   left:0;   top:0;   bottom:0;   right:0;   margin:auto;   width:20em;   height:20em;   border:1px solid #CCC;   border-radius:10em;}.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="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script></head><body>   <div   id="iwvjtn8m0"   class="tip">經測試，表現完整的瀏覽器目前只有谷歌、safari及360，IE10未測試。<br />     本例未使用javascript的setTimeout()及setInterval(),利用css3動畫原理實現的效果。<br />   <br />如看不到動態效果，請升級您的瀏覽器。。。</div>   <div   id="iwvjtn8m0"   class="clock" id="clock">     <div   id="iwvjtn8m0"   class="hours"></div>     <div   id="iwvjtn8m0"   class="minutes"></div>     <div   id="iwvjtn8m0"   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)+"deg);}}",0);pts[0].style.WebkitAnimationName="hours";pts[1].style.WebkitAnimationName="minutes";pts[2].style.WebkitAnimationName="seconds";</script><div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>

上一篇：8種超炫的html5 Loading加載圖標動畫

下一篇：prefix css3漏斗Loading加載動畫