CSS怎么畫圓盤時鐘

.clock{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
position: relative;
box-shadow: 0px 0px 10px #999;
}
.clock::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background-color: #000;
border-radius: 50%;
}
.hour-hand{
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
width: 6px;
height: 40px;
background-color: #000;
border-radius: 3px;
transition: all .5s ease-in-out;
}
.minute-hand{
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
width: 3px;
height: 60px;
background-color: #000;
border-radius: 2px;
transition: all .5s ease-in-out;
}
.second-hand{
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
width: 1px;
height: 80px;
background-color: #f00;
transition: all .5s ease-in-out;
}

在HTML文件中：

<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>

在JS文件中，我們需要根據時間來修改指針的角度：

const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
function setClock(){
const date = new Date();
const secondDeg = date.getSeconds() * 6;
const minuteDeg = date.getMinutes() * 6 + secondDeg / 60;
const hourDeg = date.getHours() * 30 + minuteDeg / 12;
hourHand.style.transform =rotate(${hourDeg}deg);
minuteHand.style.transform =rotate(${minuteDeg}deg);
secondHand.style.transform =rotate(${secondDeg}deg);
}
setInterval(setClock, 1000);

以上代碼可以讓我們畫出一個簡單的圓盤時鐘，通過變化指針的角度來表示時間的變化。