非常震撼的纯非常震撼的纯CSS3人物行走动画人物行走动画
本文分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描
绘得非常逼真。其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多张图片,然后利用CSS3的动画属性将这
些图片串联起来形成人物行走动画效果。
HTML代码
XML/HTML Code复制内容到剪贴板
<div id="canvas">
<div class="sky">
<div class="cloud-1"></div>
<div class="cloud-2"></div>
<div class="cloud-3"></div>
<div class="cloud-4"></div>
<div class="cloud-5"></div>
<div class="cloud-6"></div>
<div class="cloud-7"></div>
<div class="cloud-8"></div>
</div>
<div class="horizon"></div>
<div class="ground">
<div class="sign-best"></div>
<div class="sign-no-js"></div>
<div class="sign-lots-of-divs"></div>
<div class="sign-all-css"></div>
</div>
<!– skeleton and shadow –>
<div class="shadow"></div>
<div class="me">
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>