在網(wǎng)頁(yè)設(shè)計(jì)中，時(shí)鐘是一個(gè)常見的元素。使用CSS制作時(shí)鐘可以為頁(yè)面添加一些特色。下面介紹如何制作一個(gè)簡(jiǎn)單的CSS時(shí)鐘。

/* CSS代碼 */
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.hour-hand, .minute-hand, .second-hand {
background-color: black;
position: absolute;
transform-origin: bottom center; /* 設(shè)置旋轉(zhuǎn)中心 */
}
.hour-hand {
width: 6px;
height: 50px;
bottom: 100px;
left: 97px;
}
.minute-hand {
width: 4px;
height: 75px;
bottom: 100px;
left: 98px;
}
.second-hand {
width: 2px;
height: 100px;
bottom: 100px;
left: 99px;
}
.center-dot {
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 95px;
top: 95px;
}

以上是CSS代碼，下面介紹一下HTML和JavaScript代碼。

setInterval(function() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var hourDeg = hour * 30 + minute / 2;
var minuteDeg = minute * 6 + second / 10;
var secondDeg = second * 6;
document.querySelector('.hour-hand').style.transform = 'rotate(' + hourDeg + 'deg)';
document.querySelector('.minute-hand').style.transform = 'rotate(' + minuteDeg + 'deg)';
document.querySelector('.second-hand').style.transform = 'rotate(' + secondDeg + 'deg)';
}, 1000); // 每隔一秒鐘調(diào)用一次函數(shù)

以上是HTML和JavaScript代碼。JavaScript中使用setInterval函數(shù)每隔一秒鐘獲取當(dāng)前時(shí)間并計(jì)算出時(shí)針、分針和秒針的旋轉(zhuǎn)角度，再將角度應(yīng)用到相應(yīng)的CSS樣式中。

綜上所述，通過(guò)使用CSS和JavaScript可以輕松制作一個(gè)簡(jiǎn)單的時(shí)鐘效果。