本文將介紹如何使用CSS畫出一個(gè)簡(jiǎn)單的針表。

/* 針表外框樣式 */
.border {
width: 200px;
height: 200px;
border: 10px solid black;
border-radius: 50%;
position: relative;
}
/* 時(shí)鐘表盤樣式 */
.circle {
width: 180px;
height: 180px;
border: 5px solid black;
border-radius: 50%;
position: absolute;
top: 10px;
left: 10px;
background-color: white;
}
/* 刻度樣式 */
.marks {
width: 1px;
height: 10px;
background-color: black;
position: absolute;
top: 0;
left: 99px;
transform-origin: bottom;
}
/* 時(shí)刻度樣式 */
.marks.hour {
height: 20px;
}
/* 針樣式 */
.hand {
width: 3px;
height: 60px;
background-color: black;
position: absolute;
top: 70px;
left: 99px;
transform-origin: bottom;
transform: rotate(90deg);
}
/* 時(shí)針樣式 */
.hand.hour {
height: 40px;
}
/* 分針樣式 */
.hand.minute {
height: 50px;
}
/* 秒針樣式 */
.hand.second {
height: 60px;
}
/* 動(dòng)畫 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 應(yīng)用動(dòng)畫 */
.hand.second {
animation: rotate 60s linear infinite;
}
.hand.minute {
animation: rotate 3600s linear infinite;
}
.hand.hour {
animation: rotate 43200s linear infinite;
}

創(chuàng)建一個(gè)外框div，使用border-radius屬性將其圓形化。然后在這個(gè)div里創(chuàng)建一個(gè)小一些的div，以便創(chuàng)建盤面。在盤面里創(chuàng)建一些小的線段作為刻度。

在盤面的中心創(chuàng)建一個(gè)長(zhǎng)針，同時(shí)創(chuàng)建兩個(gè)短針分別代表分針和秒針。使它們繞中心旋轉(zhuǎn)，就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的動(dòng)態(tài)針表。