【css】动画：行走的人

ོ栖落

于 2023-06-26 22:04:04 发布

阅读量631

点赞数 2

分类专栏： # css 文章标签： css

本文链接：https://blog.csdn.net/qq_63806300/article/details/131406183

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

素材：

链接：

https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            background-image: url(https://img1.baidu.com/it/u=3361754298,960828090&fm=253&fmt=auto&app=138&f=PNG?w=1472&h=325);
            height:325px;/*平均高度*/
            width: 184px;/*平均宽度*/
            margin: 0 auto;
            animation-name: run;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(8);
           
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1472px 0;
            }
                
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

主要运用animation-timing-function: steps(8)将图片分为8份，然后一份份播放。