CSS可以幫助我們創(chuàng)造出各種有趣的漸變效果和動態(tài)動畫。今天我們來看一下一個(gè)有趣的動態(tài)時(shí)鐘的實(shí)現(xiàn)方法。

<style>
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid black;
margin: 50px auto;
position: relative;
}
.hour-hand {
width: 7px;
height: 50px;
background-color: black;
position: absolute;
left: 50%;
top: 50%;
transform-origin: bottom center;
transform: rotate(0deg);
}
.minute-hand {
width: 4px;
height: 80px;
background-color: black;
position: absolute;
left: 50%;
top: 50%;
transform-origin: bottom center;
transform: rotate(0deg);
}
.second-hand {
width: 2px;
height: 90px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform-origin: bottom center;
transform: rotate(0deg);
}
</style>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
<script>
function setTime() {
let now = new Date();
let hour = now.getHours() % 12;
let minute = now.getMinutes();
let second = now.getSeconds();
let hourDegree = hour * 30 + minute / 2;
let minuteDegree = minute * 6;
let secondDegree = second * 6;
document.querySelector('.hour-hand').style.transform =rotate(${hourDegree}deg);
document.querySelector('.minute-hand').style.transform =rotate(${minuteDegree}deg);
document.querySelector('.second-hand').style.transform =rotate(${secondDegree}deg);
}
setInterval(setTime, 1000);
</script>

上面的代碼中，我們創(chuàng)建了一個(gè)圓形的時(shí)鐘容器，然后分別添加了時(shí)針、分針和秒針的樣式。由于這三個(gè)指針是在一個(gè)圓心旋轉(zhuǎn)的，我們設(shè)置它們的位置為圓心，并設(shè)置transform-origin讓它們旋轉(zhuǎn)的中心點(diǎn)為底部中心。

接著，在JavaScript中我們使用setInterval函數(shù)每隔1秒刷新指針的角度。我們用getHours、getMinutes和getSeconds方法獲取當(dāng)前的小時(shí)、分鐘和秒數(shù)，然后算出它們對應(yīng)的角度，通過rotate函數(shù)設(shè)置指針的角度。

最終效果就是一個(gè)簡單卻有趣的動態(tài)時(shí)鐘了！