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

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

效果演示(加快了100倍)

<!–
@-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: 280px;
left: 400px;
width: 1px;
height: 50px;
background-color: #000;
-webkit-animation:rotateLabel 4320s infinite linear ;
animation:rotateLabel 4320s infinite linear ;
}
.minute
{
position: absolute;
top: 260px;
left: 400px;
width: 1px;
height: 70px;
background-color: #0000ff;
-webkit-animation:rotateLabel 36s infinite linear ;
animation:rotateLabel 36s infinite linear ;
}
.second
{
position: absolute;
top: 230px;
left: 400px;
width: 1px;
height: 100px;
background-color: #ff0000;
-webkit-animation:rotateLabel 0.6s infinite linear ;
animation:rotateLabel 0.6s infinite linear ;
}

.border{
position: absolute;
top: 225px;
left: 295px;
width: 210px;
height: 210px;
border-radius: 105px;
border: 1px solid #e0e0e0;
}
–>

实现原理

利用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调整时针、分针、秒针的初始角度就可以了。