首页 > 代码库 > CSS3+HTML5特效9 - 简单的时钟

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

2024-07-07 03:30:03   224人阅读

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

效果演示(加快了100倍)

 

 

 

 

 

 

 

<style></style>
 
 
 
 

实现原理

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

 

代码及说明

 1 <style>
 2 @-webkit-keyframes rotateLabel {
 3     0%{
 4         -webkit-transform-origin:0% 100%;
 5         -webkit-transform: rotate(0deg);
 6     }
 7     100%{
 8         -webkit-transform-origin:0% 100%;
 9         -webkit-transform: rotate(360deg);
10     }
11 }
12  
13 @keyframes rotateLabel {
14     0%{
15         transform-origin:0% 100%;
16         transform: rotate(0deg);
17     }
18     100%{
19         transform-origin:0% 100%;
20         transform: rotate(360deg);
21     }
22  }
23 .hour
24 {
25     position: absolute;
26     top: 60px;
27     left: 200px;
28     width: 1px;
29     height: 50px;
30     background-color: #000;
31     -webkit-animation:rotateLabel 43200s infinite linear ;
32     animation:rotateLabel 43200s infinite linear ;
33 }
34 .minute
35 {
36     position: absolute;
37     top: 40px;
38     left: 200px;
39     width: 1px;
40     height: 70px;
41     background-color: #0000ff;
42     -webkit-animation:rotateLabel 3600s infinite linear ;
43     animation:rotateLabel 3600s infinite linear ;
44 }
45 .second
46 {
47     position: absolute;
48     top: 10px;
49     left: 200px;
50     width: 1px;
51     height: 100px;
52     background-color: #ff0000;
53     -webkit-animation:rotateLabel 60s infinite linear ;
54     animation:rotateLabel 60s infinite linear ;
55 }
56 
57 .border{
58     position: absolute;
59     top: 5px;
60     left: 95px;
61     width: 210px;
62     height: 210px;
63     border-radius: 105px;
64     border: 1px solid #e0e0e0;
65 }
66 </style>
67 
68 <div class="hour"></div>
69 <div class="minute"></div>
70 <div class="second"></div>
71 <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调整时针、分针、秒针的初始角度就可以了。

 


联系
我们