html+css设置背景图移动以及人物行走的动画效果
生活随笔
收集整理的這篇文章主要介紹了
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>圖片材料:
視頻效果如下:
總結
以上是生活随笔為你收集整理的html+css设置背景图移动以及人物行走的动画效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: USB大容量存储设备无法启动该怎么办?
- 下一篇: 低速常温离心机S400