效果演示(加快了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>
- 第2-22行，定义了旋转的中性点及旋转的角度；
- 第23-33行，定义了时针的效果，同时定义了43200秒旋转一周，即12小时旋转360度；
- 第34-44行，定义了分针的效果，同时定义了3600秒旋转一周，即1小时旋转360度；
- 第45-55行，定义了秒针的效果，同时定义了60秒旋转一周，即1分钟旋转360度；
- 第57-65行，定义了表盘；
- 第68-71行，显示时针、分针、秒针及表盘。
至此完成了一个简单的时钟，如果要与当前计算机时间一致，只需要使用JS调整时针、分针、秒针的初始角度就可以了。