优雅WEB：三步制作CSS3扁平化小时钟

 本帖最后由 轻微生活网 于 2016-3-18 10:23 编辑

本码农长期浸淫于Dribbble等设计师网站，看到那些好看的设计作品就非常激动，但是无奈PS不精通，AI也早忘光了，只不过对前端略有研究，偶然间看到几个设计清爽的时钟，觉得用CSS实现起来应该也没什么难度，于是花了个把钟头琢磨了一个出来。

效果图

DEMO

http://output.jsbin.com/xeraxe

技术点

• box-shadow 表盘的质感什么的全靠它了
• nth-child(x) 用于表盘刻度的定位什么的
• transform-origin 这个用来定位三个表针旋转的中心点
• keyframes 表针动画效果
  

流程

先设计好DOM结构，代码如下：

1. <div class="clock-wrapper">
   
2.     <div class="clock-base">
   
3.         <div class="click-indicator">
   
4.             <div></div>
   
5.             <div></div>
   
6.             <div></div>
   
7.             <div></div>
   
8.             <div></div>
   
9.             <div></div>
   
10.             <div></div>
    
11.             <div></div>
    
12.             <div></div>
    
13.             <div></div>
    
14.             <div></div>
    
15.             <div></div>
    
16.         </div>
    
17.         <div class="clock-hour"></div>
    
18.         <div class="clock-minute"></div>
    
19.         <div class="clock-second"></div>
    
20.         <div class="clock-center"></div>
    
21.     </div>
    
22. </div>
    

复制代码

结构很简单，从样式名可以看出来每个元素的用处，中间那段空div自然就是表盘刻度了。
接下来是CSS代码

1. html,body{
   
2.     height: 100%;
   
3.     margin: 0;
   
4.     padding: 0;
   
5.     background-image: linear-gradient(#e7e7e7,#d7d7d7);
   
6. }
   
7. /*时钟容器*/
   
8. .clock-wrapper{
   
9.     position: absolute;
   
10.     top: 0;
    
11.     right: 0;
    
12.     bottom: 100px;
    
13.     left: 0;
    
14.     width: 250px;
    
15.     height: 250px;
    
16.     margin: auto;
    
17.     padding: 5px;
    
18.     background-image: linear-gradient(#f7f7f7,#e0e0e0);
    
19.     border-radius: 50%;
    
20.     box-shadow: 0 10px 15px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.2);
    
21. 
    
22. }
    
23. /*表盘*/
    
24. .clock-base{
    
25.     width: 250px;
    
26.     height: 250px;
    
27.     background-color: #eee;
    
28.     border-radius: 50%;
    
29.     box-shadow: 0 0 5px #eee;
    
30. }
    
31. /*表盘刻度容器*/
    
32. .click-indicator{
    
33.     position: absolute;
    
34.     z-index: 1;
    
35.     top: 15px;
    
36.     left: 15px;
    
37.     width: 230px;
    
38.     height: 230px;
    
39. }
    
40. /*表盘刻度*/
    
41. .click-indicator div{
    
42.     position: absolute;
    
43.     width: 2px;
    
44.     height: 4px;
    
45.     margin: 113px 114px;
    
46.     background-color: #ddd;
    
47. }
    
48. /*分别设置各个刻度的位置和角度*/
    
49. .click-indicator div:nth-child(1) {
    
50.     transform: rotate(30deg) translateY(-113px);
    
51. }
    
52. .click-indicator div:nth-child(2) {
    
53.     transform: rotate(60deg) translateY(-113px);
    
54. }
    
55. .click-indicator div:nth-child(3) {
    
56.     transform: rotate(90deg) translateY(-113px);
    
57.     background-color: #aaa;
    
58. }
    
59. .click-indicator div:nth-child(4) {
    
60.     transform: rotate(120deg) translateY(-113px);
    
61. }
    
62. .click-indicator div:nth-child(5) {
    
63.     transform: rotate(150deg) translateY(-113px);
    
64. }
    
65. .click-indicator div:nth-child(6) {
    
66.     transform: rotate(180deg) translateY(-113px);
    
67.     background-color: #aaa;
    
68. }
    
69. .click-indicator div:nth-child(7) {
    
70.     transform: rotate(210deg) translateY(-113px);
    
71. }
    
72. .click-indicator div:nth-child(8) {
    
73.     transform: rotate(240deg) translateY(-113px);
    
74. }
    
75. .click-indicator div:nth-child(9) {
    
76.     transform: rotate(270deg) translateY(-113px);
    
77.     background-color: #aaa;
    
78. }
    
79. .click-indicator div:nth-child(10) {
    
80.     transform: rotate(300deg) translateY(-113px);
    
81. }
    
82. .click-indicator div:nth-child(11) {
    
83.     transform: rotate(330deg) translateY(-113px);
    
84. }
    
85. .click-indicator div:nth-child(12) {
    
86.     transform: rotate(360deg) translateY(-113px);
    
87.     background-color: #c00;
    
88. }
    
89. /*时针*/
    
90. .clock-hour{
    
91.     position: absolute;
    
92.     z-index: 2;
    
93.     top: 80px;
    
94.     left: 128px;
    
95.     width: 4px;
    
96.     height: 65px;
    
97.     background-color: #555;
    
98.     border-radius: 2px;
    
99.     box-shadow: 0 0 2px rgba(0,0,0,.2);
    
100.     transform-origin: 2px 50px;
     
101.     transition: .5s;
     
102.     -webkit-animation: rotate-hour 43200s linear infinite;
     
103. }
     
104. /*分针*/
     
105. .clock-minute{
     
106.     position: absolute;
     
107.     z-index: 3;
     
108.     top: 60px;
     
109.     left: 128px;
     
110.     width: 4px;
     
111.     height: 85px;
     
112.     background-color: #555;
     
113.     border-radius: 2px;
     
114.     box-shadow: 0 0 2px rgba(0,0,0,.2);
     
115.     transform-origin: 2px 70px;
     
116.     transition: .5s;
     
117.     -webkit-animation: rotate-minute 3600s linear infinite;
     
118. }
     
119. /*秒针*/
     
120. .clock-second{
     
121.     position: absolute;
     
122.     z-index: 4;
     
123.     top: 20px;
     
124.     left: 129px;
     
125.     width: 2px;
     
126.     height: 130px;
     
127.     background-color: #a00;
     
128.     box-shadow: 0 0 2px rgba(0,0,0,.2);
     
129.     transform-origin: 1px 110px;
     
130.     transition: .5s;
     
131.     -webkit-animation: rotate-second 60s linear infinite;
     
132. }
     
133. .clock-second:after{
     
134.     content: "";
     
135.     display: block;
     
136.     position: absolute;
     
137.     left: -5px;
     
138.     bottom: 14px;
     
139.     width: 8px;
     
140.     height: 8px;
     
141.     background-color: #a00;
     
142.     border: solid 2px #a00;
     
143.     border-radius: 50%;
     
144.     box-shadow: 0 0 3px rgba(0,0,0,.2);
     
145. }
     
146. /*表盘中央的原型区域*/
     
147. .clock-center{
     
148.     position: absolute;
     
149.     z-index: 1;
     
150.     width: 150px;
     
151.     height: 150px;
     
152.     top: 55px;
     
153.     left: 55px;
     
154.     background-image: linear-gradient(#e3e3e3,#f7f7f7);
     
155.     border-radius: 50%;
     
156.     box-shadow: inset 0 -1px 0 #fafafa, inset 0 1px 0 #e3e3e3;
     
157. }
     
158. .clock-center:after{
     
159.     content: "";
     
160.     display: block;
     
161.     width: 20px;
     
162.     height: 20px;
     
163.     margin: 65px;
     
164.     background-color: #ddd;
     
165.     border-radius: 50%;
     
166. }

复制代码

样式文件就这些，不过这样的话三个指针都是在12点的，接下来需要让指针动起来。
其实简单点的话直接在css里面定好动画规则就行了:时针43200秒旋转360度，分针秒针以此类推。
但是强迫症表示这样坚决不行，连正确的时间都不能指示的时钟肯定是山寨品，所以这里需要找CSS的好兄弟JavaScript借下力了：

1. (function(){
   
2. 
   
3.     //generate clock animations
   
4.     var now       = new Date(),
   
5.         hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
   
6.         minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
   
7.         secondDeg = now.getSeconds() / 60 * 360,
   
8.         stylesDeg = [
   
9.             "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
   
10.             "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
    
11.             "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 360) + "deg);}}"
    
12.         ].join("");
    
13. 
    
14.     document.getElementById("clock-animations").innerHTML = stylesDeg;
    
15. 
    
16. })();

复制代码

哦，千万别忘了在head标签里面放点东西：

1. <style id="clock-animations"></style>

复制代码

不然JS生成的样式代码没地方安身啊。

教程来源：

HTML+CSS3再加一点点JS做的一个小时钟 - 优雅的Web - SegmentFault  https://segmentfault.com/a/1190000003055672