好玩的CSS3（4）--动画实现时钟+附加JS操作

了解animation

所有动画属性的简写属性，除了animation-play-state

@keyframes

规定动画

属性

animation-name:规定动画的名称（none | custom-ident | string;）
animation-duration:属性指定一个动画周期的时长，单位为s或ms；默认值为0s，表示无动画。
animation-timing-function:属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多timing-function。默认是ease;可以是贝塞尔曲线；也可以是step等
animation-delay:定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
animation-iteration-count:定义动画在结束前运行的次数可以是1次无限循环（infinite）
animation-direction:属性指示动画是否反向播放（normal|reverse|alternate|alternate-reverse|initial|inherit）
animation-fill-mode:用来指定在动画执行之前和之后如何给动画的目标应用样式(none | forwards | backwards | both)
animation-play-state: 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。

部分属性重点值详解

animation-timing-function
关键字：ease，ease-in，ease-out，ease-in-out，linear，step-start，step-end。
贝塞尔曲线：一般用它需要用到可视化图像
steps:steps(number_of_steps, direction);step-start或者step-end，分别对应steps(1, start) 和 steps(1, end)。
animation-direction
normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse 反向交替，反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
animation-fill-mode
none 动画执行前后不改变任何样式
forwards 目标保持动画最后一帧的样式
backwards 动画采用相应第一帧的样式
both 动画将会执行 forwards 和 backwards 执行的动作。
animation-play-state
running 当前动画正在运行。
paused 当前动画以被停止。

实现时钟的结构

分析结构:外面一个圆形的div–接着是刻度线（6个div）–最后用一个大的div将其覆盖，展示一下我最自信的画工
整体的HTML代码结构

    <div class="clock">
        <!-- 时间刻度线 -->
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <!-- 覆盖部分刻度线 -->
        <div class="cover"></div>
        <!-- 分针 -->
        <div class="minute"></div>
        <!-- 秒针 -->
        <div class="second"></div>
        <!-- 放置分针秒针 -->
        <div class="dotted"></div>
    </div>

形成基本的时钟

    <style>
        .clock{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            border: 10px solid #000000;
            border-radius: 110px;
            position: relative;
        }
        .line{
            width: 4px;
            background: grey;
            position: absolute;
            height: 100%;
            left: 50%;
            margin-left: -2px;
        }
        /* 通过旋转实现各个时间点 */
        .line2{
            transform: rotate(30deg);
        }
        .line3{
            transform: rotate(60deg);
        }
        .line4{
            transform: rotate(90deg);
        }
        .line5{
            transform: rotate(120deg);
        }
        .line6{
            transform: rotate(150deg);
        }
        .line1,.line4{
            width: 6px;
            margin-left: -3px;
        }
        /* 覆盖时间点，覆盖居中显示 */
        .cover{
            height: 160px;
            width: 160px;
            background: #FFFFFF;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 80px;
            margin-left: -80px;
            margin-top: -80px;
        }
    </style>

画出分针和秒针

        .dotted{
            width: 20px;
            height: 20px;
            border-radius: 10px;
            left: 50%;
            top: 50%;
            position: absolute;
            background: black;
            margin-left: -10px;
            margin-top: -10px;
        }
        .minute{
            position: absolute;
            left: 50%;
            width: 4px;
            height: 75px;
            background: green;
            top: 25px;
            margin-left: -2px;
        }
        .second{
            position: absolute;
            left: 50%;
            width: 2px;
            height: 95px;
            background: gold;
            top: 5px;
            margin-left: -1px;
            transform-origin: bottom center;
        }

让时间走动
上面的所有方法只要通过定位层级和旋转基本都能实现的，现使用动画解决秒针和分针走动。

动画规则
秒针走一圈是是360度，60秒,一步一秒。分针走一圈也是同理,定义动画规则

        @keyframes time_rotate {
            from {

            }
            to{
                transform: rotate(360deg)
            }
        }

秒针旋转360度需要60s，那么每一秒走一步，无限次。

        .second{
            ........
            transform-origin: bottom center;
            animation: time_rotate 60s steps(60) 0s infinite;
        }

分针走一圈也是360度，需要60分钟…

        .minute{
       		.......
        	transform-origin: bottom center;
            animation: time_rotate 3600s steps(60) 0s infinite;
        }

我们可以利用该效果配合我们的JS来控制

加个时针

......
		<!-- 时针 -->
        <div class="hour"></div>
        <!-- 分针 -->
        <div class="minute"></div>
......

        .hour{
            position: absolute;
            left: 50%;
            width: 6px;
            height: 55px;
            background: red;
            top: 45px;
            margin-left: -3px;
            transform-origin: bottom center;
        }

实现JS，这里我们使用定时器，结合动画效果来实现；之前的动画效果要去除掉

        .minute{
            transform-origin: bottom center;
            /* animation: time_rotate 3600s steps(60) 0s infinite; */
        }
        .second{
            transform-origin: bottom center;
            /* animation: time_rotate 60s steps(60) 0s infinite; */
        }
        /* @keyframes time_rotate {
            from {
            }
            to{
                transform: rotate(360deg)
            }
        } */

JS代码

    let secDom = document.querySelector('.second')
    let minDom = document.querySelector('.minute')
    let hourDom = document.querySelector('.hour')
    // 获取现在的时分秒
    let timerId = setInterval(function(){
        let timer = new Date()
        let tHour = timer.getHours()
        let tMin = timer.getMinutes()
        let tSec = timer.getSeconds()
        // 将其可视化
        // 秒针可视化,当前秒数应旋转多少度
        let secDeg = 360/60 * tSec
        secDom.style.transform = `rotate(${secDeg}deg)`
        // 分针可视化,当前分数应旋转多少度
        let minDeg = 360/60 * tMin
        minDom.style.transform = `rotate(${minDeg}deg)`
        // 时钟可视化，当前小时应旋转多少度
        let hourDeg = 360/12 * tHour
        hourDom.style.transform = `rotate(${hourDeg}deg)`
    },1000)

当前时间一致
整改后的HTML和CSS

    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="dotted"></div>
    </div>

.clock{width:200px;height:200px;margin:100px auto;border:10px solid #000;border-radius:110px;position:relative}.line{width:4px;background:grey;position:absolute;height:100%;left:50%;margin-left:-2px}.line2{transform:rotate(30deg)}.line3{transform:rotate(60deg)}.line4{transform:rotate(90deg)}.line5{transform:rotate(120deg)}.line6{transform:rotate(150deg)}.line1,.line4{width:6px;margin-left:-3px}.cover{height:160px;width:160px;background:#fff;position:absolute;left:50%;top:50%;border-radius:80px;margin-left:-80px;margin-top:-80px}.dotted{width:20px;height:20px;border-radius:10px;left:50%;top:50%;position:absolute;background:black;margin-left:-10px;margin-top:-10px}.hour{position:absolute;left:50%;width:6px;height:55px;background:red;top:45px;margin-left:-3px;transform-origin:bottom center}.minute{position:absolute;left:50%;width:4px;height:75px;background:green;top:25px;margin-left:-2px;transform-origin:bottom center}.second{position:absolute;left:50%;width:2px;height:95px;background:gold;top:5px;margin-left:-1px;transform-origin:bottom center}

好玩的CSS3（4）--动画实现时钟+附加JS操作

了解animation

@keyframes

属性

部分属性重点值详解

实现时钟的结构

我们可以利用该效果配合我们的JS来控制

猜你喜欢