非常震撼的纯CSS3人物行走动画

本文分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。

HTML代码

1. <div id="canvas">  
2.         <div class="sky">  
3.             <div class="cloud-1"></div>  
4.             <div class="cloud-2"></div>  
5.             <div class="cloud-3"></div>  
6.             <div class="cloud-4"></div>  
7.             <div class="cloud-5"></div>  
8.             <div class="cloud-6"></div>  
9.             <div class="cloud-7"></div>  
10.             <div class="cloud-8"></div>  
11.         </div>  
12.         <div class="horizon"></div>  
13.         <div class="ground">  
14.             <div class="sign-best"></div>  
15.             <div class="sign-no-js"></div>  
16.             <div class="sign-lots-of-divs"></div>  
17.             <div class="sign-all-css"></div>  
18.         </div>  
19.         <!-- skeleton and shadow -->  
20.         <