CSS3+HTML5特效9 - 简单的时钟

原文:CSS3+HTML5特效9 - 简单的时钟

效果演示(加快了100倍)

 

 

 

 

实现原理

利用CSS3的transform-origin 及 transform 完成以上效果。

代码及说明

 <style>
 @-webkit-keyframes rotateLabel {
     0%{
         -webkit-transform-origin:0% 100%;
         -webkit-transform: rotate(0deg);
     }
     100%{
         -webkit-transform-origin:0% 100%;
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes rotateLabel {
     0%{
         transform-origin:0% 100%;
         transform: rotate(0deg);
     }
     100%{
         transform-origin:0% 100%;
         transform: rotate(360deg);
     }
  }
 .hour
 {
     position: absolute;
     top: 60px;
     left: 200px;
     width: 1px;
     height: 50px;
     background-color: #000;
     -webkit-animation:rotateLabel 43200s infinite linear ;
     animation:rotateLabel 43200s infinite linear ;
 }
 .minute
 {
     position: absolute;
     top: 40px;
     left: 200px;
     width: 1px;
     height: 70px;
     background-color: #0000ff;
     -webkit-animation:rotateLabel 3600s infinite linear ;
     animation:rotateLabel 3600s infinite linear ;
 }
 .second
 {
     position: absolute;
     top: 10px;
     left: 200px;
     width: 1px;
     height: 100px;
     background-color: #ff0000;
     -webkit-animation:rotateLabel 60s infinite linear ;
     animation:rotateLabel 60s infinite linear ;
 }

 .border{
     position: absolute;
     top: 5px;
     left: 95px;
     width: 210px;
     height: 210px;
     border-radius: 105px;
     border: 1px solid #e0e0e0;
 }
 </style>

 <div class="hour"></div>
 <div class="minute"></div>
 <div class="second"></div>
 <div class="border"></div>

1. 第2-22行，定义了旋转的中性点及旋转的角度；
2. 第23-33行，定义了时针的效果，同时定义了43200秒旋转一周，即12小时旋转360度；
3. 第34-44行，定义了分针的效果，同时定义了3600秒旋转一周，即1小时旋转360度；
4. 第45-55行，定义了秒针的效果，同时定义了60秒旋转一周，即1分钟旋转360度；
5. 第57-65行，定义了表盘；
6. 第68-71行，显示时针、分针、秒针及表盘。

至此完成了一个简单的时钟，如果要与当前计算机时间一致，只需要使用JS调整时针、分针、秒针的初始角度就可以了。