CSS可以幫助我們創造出各種有趣的漸變效果和動態動畫。今天我們來看一下一個有趣的動態時鐘的實現方法。

<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>

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

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

最終效果就是一個簡單卻有趣的動態時鐘了！