css3系列之animation实现逐帧动画

￡神魔★判官ぃ 2023-08-17 15:23 138阅读 0赞

![1609428-20190728151248913-1545605264.gif][]![1609428-20190728151516302-956452338.gif][]

上面这个两个简单的动画，是用 **animation-timing-function: steps();**  这个属性实现的，具体如何实现，看下面：

![1609428-20190728151859394-1094074128.png][]

这上面的图片，也就是我们的素材，

![1609428-20190728152716338-488479441.png][]

有些人，可能不是很理解 关键帧容器，和 steps 之间的关系，没关系，看下面的图解

![1609428-20190728153800933-899101833.png][]

下面做钟表

![1609428-20190728154951991-1080579535.png][]

用到的素材，如上所示。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
         
                padding: 0;
                margin: 0;
            }
            
    
            @keyframes secondRun {
         
                0% {
                    transform: rotate(180deg);
                }
                                                    /* 由于，我们只需要他 转一圈，所以，我们定义好一圈的角度即可 */
                100% {
         
                    transform: rotate(540deg);
                }
            }
            .wra {
         
                width: 200px;
                height: 200px;
                position: relative;
                left: calc(50% - 100px);
                top: 100px;                             /*父元素的 基本布局*/
                background-image: url('./img/clock/clock.png');
                background-size: 100% 100%;
            }
    
            .hour {
         
                position: absolute;
                left: 95px;
                top: 95px;          /*把时针，定位到 中间点*/
                width: 10px;
                height: 45px;
                background-image: url('./img/clock/hour.png');
                background-size: 100% 100%;
                z-index: 2;
            }
    
            .minute {
         
                position: absolute;
                left: 95px;
                top: 95px;         /*把分针定位到中间点*/
                width: 10px;
                height: 66px;
                background-image: url('./img/clock/minute.png');
                background-size: 100% 100%;
                animation: secondRun 3600s infinite steps(60, end); /*steps 把总时长分割成 60  3600/60 =60 所以需要运动 60步* 60s走一次   */
                transform-origin: center 5px;   /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/
                transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */
                z-index: 1;
            }
    
            .second {
         
                position: absolute;
                left: 98px;
                top: 77px;         /*把秒针定位到中间点*/
                width: 5px;
                height: 84px;
                background-image: url('./img/clock/second.png');
                background-size: 100% 100%;
                animation: secondRun 60s infinite steps(60, end);    /*steps 把总时长分割成 1 60/60 = 1 所以需要运动 60步， 1s 走一次*/
                transform-origin: center 23px;  /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/
                transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */
                z-index: 3;
            }
        </style> 
    </head>
    
    <body>
        <div class="wra">
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </body>
    
    </html>

以下是素材，如何获取素材？ 右键 检查， 就能找到 该图片的url 了。

![1609428-20190728160709850-963796558.png][]

![1609428-20190728160726455-429459498.png][]![1609428-20190728160735914-119015202.png][]![1609428-20190728160740893-2023446791.png][]![1609428-20190728160744924-1896826871.png][]

转载于:https://www.cnblogs.com/yanggeng/p/11259370.html

[1609428-20190728151248913-1545605264.gif]: https://img2018.cnblogs.com/blog/1609428/201907/1609428-20190728151248913-1545605264.gif
[1609428-20190728151516302-956452338.gif]: /images/20230810/75042f0e00b44cc99dfb254903286c0e.png
[1609428-20190728151859394-1094074128.png]: /images/20230810/8699f761df774595aadc827f96fed50c.png
[1609428-20190728152716338-488479441.png]: /images/20230810/b3cef19a46c24e5e8ffda2c0b607a963.png
[1609428-20190728153800933-899101833.png]: /images/20230810/0a86146ca87d48258ee65cf517b462c9.png
[1609428-20190728154951991-1080579535.png]: /images/20230810/1aeec74c77f9438fb70b06f65713e459.png
[1609428-20190728160709850-963796558.png]: /images/20230810/865049e483cc44968e936dd4fc54d763.png
[1609428-20190728160726455-429459498.png]: https://img2018.cnblogs.com/blog/1609428/201907/1609428-20190728160726455-429459498.png
[1609428-20190728160735914-119015202.png]: https://img2018.cnblogs.com/blog/1609428/201907/1609428-20190728160735914-119015202.png
[1609428-20190728160740893-2023446791.png]: https://img2018.cnblogs.com/blog/1609428/201907/1609428-20190728160740893-2023446791.png
[1609428-20190728160744924-1896826871.png]: /images/20230810/4de5f457ecdc46dfa68c449db70c66ff.png