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>