html+css设置背景图移动以及人物行走的动画效果

下面展示一些 内联代码片。

<style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        .contenter {
            /* 宽度设定,会出现空白 */
            height: 100vh;
            background-image: url(./background.jpg);
            /* 使用动画效果，设置时间，速度匀速，执行动画的次数为无限次 */
            animation: bg-ani 30s linear infinite;
        }

        .parent {
            /* 人物图片设置绝对定位,相对于视口区进行定位,脱离文档流,不保留原来的位置 */
            position: absolute;
            top: 300px;
            left: 400px;
        }

        /* 背景图片的动画效果,开始从图片的最右边一点一点向左边移动 */
        @keyframes bg-ani {
            from {
                margin-left: -1920px;
            }

            to {
                margin-left: 0px;
            }
        }

        .wk {
            /* 设置人物大小,设置浮动,且要清除浮动带来的影响*/
            width: 200px;
            overflow: hidden;
            float: left;

        }

        .wk img {
            /* 人物的动画效果,设置人物行走的时间,且动画执行无数次 */
            animation: wk-ani 3s infinite;
            /* 设置人物动作分八次完成 */
            animation-timing-function: steps(8);
        }

        /* 人物的动画效果,从图片最左边移动到最右边 */
        @keyframes wk-ani {
            from {
                margin-left: 0px;
            }

            to {
                margin-left: -1600px;
            }
        }
        </style>

<!-- 背景图片动画 -->
    <div class="contenter">
    </div>
    <div class="parent">
        <!-- 人物动画 -->
        <div class="wk">
            <img src="./wk.png" alt="">
        </div>
    </div>

图片材料：

视频效果如下：