使用CSS动画实现 时钟转动效果

使用CSS动画实现 时钟转动效果

此案例主要运用到了css动画的功能。

先将外圆画好，时钟的时间轴先画正中间那一根，绝对定位到中间，然后复制时间轴类名，并依次添加旋转30度的css代码，需要注意的是，后面使用transform:rotate()会覆盖掉前面的transform:translate()属性，因此都要加上translate。然后画一个白色的遮罩层，放在外圆的正中间，以圆形挡住后面的大部分时间轴。接着开始画时、分、秒指针，依然是绝对定位到中间，但是指针的旋转点是自身中底部，因此transform属性设置为translate(-50%,-100%)，指针整体上去，并设置旋转中心transform-origin:bottom，即可实现指针按顺时针方向旋转。

时钟的起点我定义为0秒，秒针转一圈是360°，因此动画代码为：

        @keyframes rotate360 {
            /* 起始点是0秒，此处可省略动画起点from */
            to {
                /* 避免translate被覆盖，此处可再添加translate */
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }

然后给秒针加上动画属性，速度曲线我这里设置的是steps(60)，在60s动画里一共有60帧，那么相当于秒针一秒走一次，一分钟走完一圈。

            animation: rotate360 60s steps(60) infinite;

给分针加上动画属性，这里的速度曲线建议使用linear，随着秒针的转动，分针慢慢过渡转动。

            animation: rotate360 3600s linear infinite;

给时针加上动画属性，跟分针同理。

            animation: rotate360 43200s linear infinite;

最后，加上一个小黑圆点放在正中间，时分秒针的旋转中心都在这小黑点上，让时钟看起来更完美一些。

CSS时钟动画，完整代码如下：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clock {
            box-sizing: border-box;
            border-radius: 50%;
            border: 7px solid #000;
            width: 500px;
            height: 500px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .line {
            position: absolute;
            left: 50%;
            width: 7px;
            height: 500px;
            background-color: gray;
            transform: translate(-50%);
        }
        
        .line:nth-of-type(2) {
            /* 六条线，各旋转30度 */
            transform: translate(-50%) rotate(30deg);
        }
        
        .line:nth-of-type(3) {
            transform: translate(-50%) rotate(60deg);
        }
        
        .line:nth-of-type(4) {
            transform: translate(-50%) rotate(90deg);
        }
        
        .line:nth-of-type(5) {
            transform: translate(-50%) rotate(120deg);
        }
        
        .line:nth-of-type(6) {
            transform: translate(-50%) rotate(150deg);
        }
        
        .mark {
            width: 370px;
            height: 370px;
            background-color: #fff;
            border-radius: 50%;
            /* 将遮罩层绝对垂直居中到父元素里 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .hour,
        .minute,
        .second {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            /* 设置时、分、秒针的旋转中心为底部 */
            transform-origin: bottom;
        }
        
        .hour {
            width: 10px;
            height: 90px;
            background-color: rgb(73, 6, 6);
            /* 给时针设置匀速转动的动画效果 */
            animation: rotate360 43200s linear infinite;
        }
        
        .minute {
            width: 7px;
            height: 110px;
            background-color: rgb(71, 248, 55);
            /* 给分针设置匀速转动的动画效果 */
            animation: rotate360 3600s linear infinite;
        }
        
        .second {
            width: 4px;
            height: 130px;
            background-color: rgb(145, 132, 255);
            /* 给秒针设置60帧动画效果，1秒1帧，60s转完一圈 */
            animation: rotate360 60s steps(60) infinite;
        }
        
        .dot {
            width: 22px;
            height: 22px;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        @keyframes rotate360 {
            /* 起始点是0秒（原样），此处可省略动画起点from */
            to {
                /* 避免translate被覆盖，此处可再添加translate */
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>

    <div class="clock">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <!-- 白色遮罩层 -->
        <div class="mark"></div>
        <!-- 时、分、针进行动画效果 -->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <!-- 时钟正中的小圆点 -->
        <div class="dot"></div>
    </div>