CSS是前端開發中非常重要的一項技術，可以實現很多特效，其中包括鬧鐘的功能。下面我們來學習一下如何使用CSS實現一個簡單的鬧鐘。

/* HTML結構 */
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
</div>
/* CSS樣式 */
.clock {
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #f9f9f9;
position: relative;
margin: 50px auto;
}
.hour-hand {
width: 20px;
height: 70px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: bottom center;
}
.minute-hand {
width: 15px;
height: 95px;
background-color: #333;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: bottom center;
}
.second-hand {
width: 5px;
height: 115px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: bottom center;
animation: rotate 60s linear infinite;
}
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* JavaScript代碼 */
setInterval(() => {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
const hourDegrees = (hours / 12) * 360 + (minutes / 60) * 30 - 90;
const minuteDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 - 90;
const secondDegrees = (seconds / 60) * 360 - 90;
hourHand.style.transform = `translate(-50%, -50%) rotate(${hourDegrees}deg)`;
minuteHand.style.transform = `translate(-50%, -50%) rotate(${minuteDegrees}deg)`;
secondHand.style.transform = `translate(-50%, -50%) rotate(${secondDegrees}deg)`;
}, 1000);

通過上述HTML結構和CSS樣式，我們可以實現一個圓形的鬧鐘，并通過JavaScript代碼動態設置時針、分針和秒針的旋轉角度，從而實現實時顯示時間的功能。

總體來說，CSS鬧鐘是一個非常實用的前端特效，可以為網站添加趣味性，也可以作為學習CSS的練習項目。希望大家能夠掌握這個技術，為自己的前端開發技能加油！