用css3动画效果做的跑动效果

用css3动画效果做的跑动效果

用到的图片

创建两个盒子

css样式

思路大概是给boxmax设置宽高，能容下一个小人即可，overflow: hidden;使溢出盒子的图片隐藏，再分成七个动画阶段，每个阶段把小人往左移入盒子中，step-start 马上跳到动画每一结束桢的状态，infinite无限循环，即可完成小人蹦跳的效果。
制作简单，可以自己试一试啊，效果特别可爱啊。