[分享]css3摆钟的效果

CSS3是WEB前端技术的重要组成部分，今天我们要介绍的是CSS3摆钟效果。

 .container {
        width: 500px;
        height: 500px;
        border: 10px solid #ddd;
        border-radius: 50%;
        position: relative;
        margin: 100px auto;
    }
    .center {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .hour {
        width: 6px;
        height: 80px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -3px;
        transform-origin: bottom center;
    }
    .minute {
        width: 4px;
        height: 100px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -2px;
        transform-origin: bottom center;
    }
    .second {
        width: 2px;
        height: 120px;
        background-color: #f00;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1px;
        transform-origin: bottom center;
    }
    .hour.hand {
        transform: rotate(30deg);
    }
    .minute.hand {
        transform: rotate(180deg);
    }
    .second.hand {
        transform: rotate(270deg);
    } 

如上代码所示，使用CSS3实现摆钟效果需要设置一个容器，然后在容器内部放置一个圆心。圆心就是钟表的中心。接下来，我们需要设置时、分、秒三个针的样式，这三个针的长度和样式不同，需要分别设置。注意设置transform-origin属性，这个属性决定了针的旋转中心。

最后，在时、分、秒三个针的样式中分别加上hand类名，在CSS中设置hand类名的transform属性就能让钟表动起来了！

通过以上代码和介绍，你也可以在网页上实现一个自己的CSS3摆钟效果！