用css3動(dòng)畫效果做的跑動(dòng)效果

用到的圖片

創(chuàng)建兩個(gè)盒子

css樣式

思路大概是給boxmax設(shè)置寬高，能容下一個(gè)小人即可，overflow: hidden;使溢出盒子的圖片隱藏，再分成七個(gè)動(dòng)畫階段，每個(gè)階段把小人往左移入盒子中，step-start 馬上跳到動(dòng)畫每一結(jié)束楨的狀態(tài)，infinite無限循環(huán)，即可完成小人蹦跳的效果。
制作簡單，可以自己試一試啊，效果特別可愛啊。

總結(jié)

以上是生活随笔為你收集整理的用css3动画效果做的跑动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。