標簽，作為時鐘的外框。然后，我們可以使用CSS的transform: rotate()屬性來實現時鐘指針的旋轉效果。接下來，我們將通過CSS來設置時鐘的指針形狀、顏色、位置等樣式。

.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f7f7f7;
position: relative;
overflow: hidden;
}
.clock .hour {
width: 6px;
height: 40px;
background-color: #000;
position: absolute;
left: 97px;
top: 60px;
transform-origin: bottom center;
}
.clock .minute {
width: 4px;
height: 60px;
background-color: #000;
position: absolute;
left: 98px;
top: 40px;
transform-origin: bottom center;
}
.clock .second {
width: 2px;
height: 80px;
background-color: #f00;
position: absolute;
left: 99px;
top: 20px;
transform-origin: bottom center;
}
@keyframes hour {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes minute {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes second {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.clock .hour {
animation: hour 12s linear infinite;
}
.clock .minute {
animation: minute 60s linear infinite;
}
.clock .second {
animation: second 1s linear infinite;
}

上面的CSS代碼就是完成時鐘效果的核心代碼，我們可以根據實際情況進行微調來使時鐘更加美觀。其中，animation屬性用于定義時鐘指針旋轉動畫，@keyframes用于定義動畫過程中的關鍵幀。

最后，我們只需要在HTML中引入這段CSS樣式，便可以在頁面中看到一個美觀的時鐘啦！

這就是使用CSS制作時鐘的全過程。CSS的強大之處在于，它可以幫助我們實現各種復雜的效果，而只需要很少的代碼量。希望這篇文章能夠對你有所幫助，讓你更好地理解CSS的魅力。