下面展示一些内联代码片。
<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>
图片材料：
视频效果如下：
