CSS3 非线性时间函数应用

（网络图片、如侵权必删除）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .fire{
                width:166.7px;
                height:296px;
                background:url(img/img4.jpg) no-repeat;
                animation: round 1s steps(9) infinite alternate;//非线性时间 step(n)
            }
            @keyframes round{
                100%{
                    background-position-x:-1500px ;
                }
                
            }
        </style>
    </head>
    <body>
        <div class="fire"></div>
    </body>
</html>

效果图

 

 

posted @ 2019-11-06 18:12  梁涛999  阅读(323)  评论(0)  编辑  收藏  举报