CSS3 实现人物赛跑动画

Create at 2015 05 217 min read技术CSS3奔跑

最近公司的一个手机项目里面有一个动画,就是一个人在跑道上跑步。为了能在手机端发挥更好的性能,选择了全部用 CSS3 来做一个动画。 因为是第一次做,碰到了很多问题,记录下来。

效果图是这样的: All

分析

拿到效果图先分析一下,可以看到动画分为一下四个部分:

  • 跑动的小人
  • 运动的路
  • 左边的路牌
  • 收益的牌子

小人

小人很好解决,通过使用一张跑步的分解图片, person 然后通过逐帧的变动它的`background-position'就可以了,真是简单啊。

.person {
    width: 62px;
    height: 110px;
    background: url(../imgs/p