HTML 時鐘

這是一個用 HTML 和 CSS 制作的時鐘。

如果你想了解更多細節，請查看下面的源代碼。

<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="center-dot"></div>
</div>
.clock {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
margin: 0 auto;
position: relative;
background-color: white;
}
.hour-hand {
height: 25px;
width: 4px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
}
.minute-hand {
height: 45px;
width: 2px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
}
.second-hand {
height: 60px;
width: 1px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
z-index: 2;
}
.center-dot {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}

以上代碼中，時鐘是通過一個 div 元素來創建的。時針、分針和秒針分別是 div 元素中的三個不同的子元素，它們的樣式是通過 .hour-hand、.minute-hand 和 .second-hand 類來定義的。

時針、分針和秒針的位置是通過 CSS 中的position: absolute;來設置的。它們的起點是中心點，終點是時鐘邊緣。為了使它們的起點始終在中心點，還需要將它們的transform-origin屬性設置為底部中心。

時鐘中心的黑點是通過一個額外的 div 元素來創建的，它的樣式定義在 .center-dot 類中。

以上就是用 HTML 和 CSS 制作時鐘的全部代碼和細節了。