下面展示一些 內聯代碼片。

<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>

圖片材料：

視頻效果如下：

總結

以上是生活随笔為你收集整理的html+css设置背景图移动以及人物行走的动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。