使用CSS3-animation简单制作逐帧动画

梦里梦外; 2021-11-16 10:02 290阅读 0赞

今天做了个demo。使用CSS3-animation来制作逐帧动画，非常简单！

**动画的关键是使用了animation的steps属性。至于怎么用，什么原理，读者可以自己去查阅相关资料~~~**

demo1如下：

demo1代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3逐帧动画</title>
        <style>
        .anim-png{
         
            width:230px;
            height: 202px;
            background:url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/anims/newLOGO-lg.png)no-repeat 0 0;
            -webkit-animation:leaf 1500ms steps(44) infinite 0s;
        }
        @-webkit-keyframes leaf{
         
            0%{
                background-position:-10120px 0;
            }
            100%{
         
                background-position: 0 0;
            }
        }
        </style>
    </head>
    <body>
    <div class="anim-png"></div>
    </body>
    </html>

demo2：

demo2代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3逐帧动画</title>
        <style>
        .anim-png2{
         
            width: 478px;
              height: 426px;
            background:url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/mintPlant-sprite.png)no-repeat 0 0;
            -webkit-animation:leaf2 2000ms steps(54) infinite 0s;
        }
        @-webkit-keyframes leaf2{
         
            0%{
                background-position:-25812px 0;
            }
            100%{
         
                background-position: 0 0;
            }
        }
        </style>
    </head>
    <body>
    <div class="anim-png2"></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/joyho/articles/4386917.html