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的特效，实现更加个性化、互动性更好的效果。