超级推荐：css3 clock 简洁的指针动画时钟

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
   <div class="tip">经测试，表现完整的浏览器目前只有谷歌、safari及360，IE10未测试。<br />
     本例未使用javascript的setTimeout()及setInterval(),利用css3动画原理实现的效果。<br />
   <br />如看不到动态效果，请升级您的浏览器。。。</div>
   <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)+"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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

超级推荐：css3 clock 简洁的指针动画时钟

分类

HTML5代码

描述

css3动画版时钟特效，CSS3&clock比较简洁的指针时钟，CSS3电子钟，电子表。经测试，表现完整的浏览器目前只有谷歌、safari及360，IE10未测试。本例未使用javascript的setTimeout()及setInterval(),利用css3动画原理实现的效果。如看...