css画钟表_学习CSS之用CSS实现时钟效果

一、机械时钟

1.最终效果

用 CSS 绘制的机械时钟效果如下：

HTML 中代码结构为：

其中 clock 类为表盘， min 类是分钟刻度，hour 类是时钟刻度，numbers 类是数字刻度，类名为 pointer 的 ul 中包含的则是时针、分针和秒针等。

2.绘制表盘

首先要把表盘和表盘中心给绘制出来，如下图：

表盘中心要处在正中心，使用绝对定位进行实现，代码如下：

/*表盘*/.clock {

width: 200px;

height: 200px;

margin: 30px auto;

border-radius: 100px;

background-color: #292a38;

position: relative;

}

.circle {

position: absolute;

top:50%;

left:50%;

background: white;

width: 10px;

height: 10px;

border-radius: 5px;

margin-top: -5px;

margin-left: -5px;

}

3.绘制刻度

钟表的刻度就是一个矩形，只不过需要根据表盘中心进行偏移，例如：

对应的代码为：

/*刻度*/.line-demo {

position: absolute;

width: 20px;

height: 10px;

left:50%;

top:50%;

transform-origin: left center;

transform: translate(85px,-5px);

}

但要实现一点到十二点总共十二个刻度，还需要使用 transform 中的 rotate() 进行旋转，实现的代码如下，其中 val 表示的是各个刻度线对应的旋转角度，而 key1 和 key2 分别表示 x 方向和 y 方向上的偏移量，而对 key1 和 key2 进行调整，是为了改善刻度线显示的效果。

1 functionCreateHourLines() {2 /*绘制钟表的时钟刻度线*/

3 var html = "";4 //key1表示x方向上的偏移量，key2表示y方向上的偏移量

5 varval, key1, key2;6 for (var i = 0; i < 12; i++) {7 val = i * 30;8 key1 = 88;9 key2 = 0;10 if (val > 180 && val < 360) {11 key1 = 90;12 }13 if (val > 0 && val < 180) {14 key1 = 85

15 }16

17 if (val > 90 && val < 270) {18 key2 = 3;19 }20 if (val < 90 || val > 270) {21 key2 = -3;22 }23 html += "

";24 }25 $(".hour").html(html);26 }

分钟的刻度线绘制和时钟类似，除此之外，还要绘制各个小时的数字刻度，效果如下：

4.绘制指针

指针的绘制要把时针、分针和秒针都绘制出来，需要注意的是时钟最短最粗，秒针最长最细，而且都要用绝对定位使指针处在表盘中心，实现的效果如下：

时针、分针和秒针的 CSS 代码如下：

/*指针*/.p-hour {

position: absolute;

width: 45px;

height: 3px;

top:50%;

left:50%;

transform-origin: left center;

background: #fff;

margin-top: -2px;

}

.p-min {

position: absolute;

width: 60px;

height: 2px;

top:50%;

left:50%;

transform-origin: left center;

background: #fff;

margin-top: -2px;

}

.p-s