css3时钟怎么画

CSS3时钟是一种非常炫酷的效果，如果你也想尝试一下，那么就跟着下面的步骤来画一个吧！

.clock{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #eee;
    position: relative;
    border: 2px solid #333;
}

.hour-hand{
    width: 4px;
    height: 60px;
    background-color: #333;
    position: absolute;
    left: 48%;
    bottom: 50%;
    transform-origin: bottom;
    transform: rotate(90deg);
    transition: all 0.5s ease-in-out;
}

.minute-hand{
    width: 2px;
    height: 90px;
    background-color: #333;
    position: absolute;
    left: 49%;
    bottom: 50%;
    transform-origin: bottom;
    transform: rotate(90deg);
    transition: all 0.5s ease-in-out;
}

.second-hand{
    width: 1px;
    height: 110px;
    background-color: #dd4b39;
    position: absolute;
    left: 49.5%;
    bottom: 50%;
    transform-origin: bottom;
    transform: rotate(90deg);
    transition: all 0.5s ease-in-out;
}

.dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    background-color: #333;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
}

.dot:after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    background-color: #eee;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
}

@media screen and (max-width: 480px) {
    .clock{
        width: 150px;
        height: 150px;
    }
    .hour-hand{
        height: 40px;
    }
    .minute-hand{
        height: 70px;
    }
    .second-hand{
        height: 90px;
    }
}

我们先建立一个 .clock 的 div 容器，它的 border-radius 设置成 50%，这样就能画出一个圆形表盘，并且设置好背景、边框颜色。

接下来我们需要分别画三根针：小时针、分钟针和秒针。这里我们通过设置 div 的 width、height、background-color 和 position 来实现针的效果，并通过 transform 属性和 transform-origin 属性来设置针的朝向，以及设置针的起始位置。需要注意的是，我们必须把时针的 transform 属性的值设置成 rotate(90deg)，这样才能把时针“横着放”，否则的话就会“头朝下”，效果会很奇怪。

最后，我们还需要在表盘的中心画一个圆形，作为指针的交点。同样地，我们通过两层嵌套的 div 元素、一些 css 属性和伪元素来实现效果。样式设置完成后，就可以在我们的网页中看到炫酷的时钟了！