最近公司的一个手机项目里面有一个动画,就是一个人在跑道上跑步。为了能在手机端发挥更好的性能,选择了全部用 CSS3 来做一个动画。 因为是第一次做,碰到了很多问题,记录下来。
效果图是这样的:
分析
拿到效果图先分析一下,可以看到动画分为一下四个部分:
- 跑动的小人
- 运动的路
- 左边的路牌
- 收益的牌子
小人
小人很好解决,通过使用一张跑步的分解图片, 然后通过逐帧的变动它的`background-position'就可以了,真是简单啊。
.person {
width: 62px;
height: 110px;
background: url(../imgs/p