其实主要难点在于最左边的小时钟
指针的实现方式很简单，就是通过绝对定位将指针移到中间，然后以下边中间的位置为圆心旋转即可。代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .clock-wrapper { background-color: blue; height: 200px; width: 200px; position: relative; } .pointer { height: 80px; width: 6px; background-color: silver; position: absolute; top: 20px; left: 97px; /* 100 - 6/2 */ transform: rotateZ(30deg); transform-origin: center bottom; } </style> </head> <body> <div class="clock-wrapper"> <div class="pointer"></div> </div> </body> </html>