CSS畫簡單時鐘，是前端開發中常見的一個實現效果。下面給大家分享一下我常用的代碼。

.clock {
width: 200px;
height: 200px;
border: 4px solid #000;
border-radius: 50%;
position: relative;
}
.clock .hour,
.clock .minute,
.clock .second {
width: 50%;
height: 4px;
background-color: #000;
position: absolute;
top: 50%;
transform: translateY(-50%);
transform-origin: left;
}
.clock .hour {
z-index: 3;
}
.clock .minute {
z-index: 2;
}
.clock .second {
z-index: 1;
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.clock .hour-hand {
length: 30%;
width: 8px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
z-index: 4;
}
.clock .minute-hand {
length: 45%;
width: 4px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
z-index: 4;
}
.clock .second-hand {
length: 48%;
width: 2px;
background-color: #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
z-index: 4;
}

上面這段代碼實現了一個簡單的時鐘效果，包括時針、分針、秒針以及時鐘的輪廓。其中，時針、分針、秒針分別使用了不同的z-index來保證它們之間的順序性，在圓心位置利用transform屬性完成定位，通過transform-origin屬性來控制它們各自的起始位置。時針和分針使用了圓角，使得邊緣更加光滑，視覺效果更好。

值得注意的是，這里的秒針使用了CSS3中的transition屬性，實現了一個平滑轉動的效果，視覺效果更加真實。

總的來說，這是一個相對簡單的時鐘實現方式，但是可以從中發掘更多CSS3的特效，實現更加個性化、互動性更好的效果。