在網(wǎng)頁(yè)設(shè)計(jì)中，時(shí)鐘是一個(gè)常見的元素，它能為網(wǎng)頁(yè)帶來(lái)生動(dòng)的感覺(jué)。用css動(dòng)畫制作時(shí)鐘是一種方便實(shí)用的方式，下面我們來(lái)看看如何制作一個(gè)簡(jiǎn)單的時(shí)鐘。

首先，我們需要html部分。我們可以使用div來(lái)創(chuàng)建時(shí)鐘的外層容器，然后使用多個(gè)div元素來(lái)表示時(shí)鐘上的各個(gè)部分，如時(shí)針、分針和秒針等。

<div class="clock">
<div id="hourhand" class="hour-hand"></div>
<div id="minutehand" class="minute-hand"></div>
<div id="secondhand" class="second-hand"></div>
<div class="face"></div>
</div>

接著，我們給時(shí)鐘容器和各個(gè)部分設(shè)置css樣式。我們可以使用絕對(duì)定位來(lái)讓時(shí)針、分針和秒針指向正確的方向。同時(shí)，我們還可以使用animation屬性來(lái)創(chuàng)建一個(gè)旋轉(zhuǎn)動(dòng)畫，這樣時(shí)針、分針和秒針就會(huì)動(dòng)起來(lái)了。

.clock {
width: 200px;
height: 200px;
position: relative;
margin: 50px auto;
}
.hour-hand, .minute-hand, .second-hand {
width: 50%;
height: 2px;
position: absolute;
top: 50%;
transform-origin: 100% 50%;
}
.hour-hand {
background-color: #222;
animation: hour-rotate 12s linear infinite;
}
.minute-hand {
background-color: #555;
animation: minute-rotate 60s linear infinite;
}
.second-hand {
background-color: #f00;
animation: second-rotate 1s linear infinite;
}
.face {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes hour-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes minute-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes second-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

最后，我們就可以在瀏覽器中預(yù)覽我們的時(shí)鐘了。它會(huì)一直旋轉(zhuǎn)不停，仿佛真的擁有了流逝的時(shí)間。當(dāng)然，我們還可以繼續(xù)對(duì)它進(jìn)行優(yōu)化和完善，讓它更加逼真。