CSS實(shí)現(xiàn)圓盤(pán)時(shí)鐘的示例代碼
<!DOCTYPE html>
<html>
<head>
<title>CSS圓盤(pán)時(shí)鐘示例</title>
<style>
#clock {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
background-color: #f0f0f0;
}
#hour-hand {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 40px;
background-color: #000;
transform-origin: bottom;
}
#minute-hand {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 60px;
background-color: #333;
transform-origin: bottom;
}
#second-hand {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 80px;
background-color: #f00;
transform-origin: bottom;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour-hand"></div>
<div id="minute-hand"></div>
<div id="second-hand"></div>
</div>
<script>
// 這里可以添加JavaScript代碼來(lái)更新時(shí)鐘的時(shí)間顯示
</script>
</body>
</html>
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。
