体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: CSS3+Sprite实现僵尸行走动画特效源码
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

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

来源: 易采站长站

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

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div id="canvas">           <div class="sky">  
  2.             <div class="cloud-1"></div>               <div class="cloud-2"></div>  
  3.             <div class="cloud-3"></div>               <div class="cloud-4"></div>  
  4.             <div class="cloud-5"></div>               <div class="cloud-6"></div>  
  5.             <div class="cloud-7"></div>               <div class="cloud-8"></div>  
  6.         </div>           <div class="horizon"></div>  
  7.         <div class="ground">               <div class="sign-best"></div>  
  8.             <div class="sign-no-js"></div>               <div class="sign-lots-of-divs"></div>  
  9.             <div class="sign-all-css"></div>           </div>  
  10.         <!-- skeleton and shadow -->           <div class="shadow"></div>  
  11.         <div class="me">     
  12.             <div class="torso">                   <div class="left leg">  
  13.                     <div class="left thigh">                           <div class="left shin">  
  14.                             <div class="left foot">                                   <div class="left toes"></div>  
  15.                             </div>                           </div>  
  16.                     </div>                   </div>  
  17.  <!-- left leg -->     
  18.                 <div class="right leg">                       <div class="right thigh">  
  19.                         <div class="right shin">                               <div class="right foot">  
  20.                                 <div class="right toes"></div>                               </div>  
  21.                         </div>                       </div>  
  22.                 </div>    <!-- right leg -->  
  23.                    <div class="left arm">  
  24.                     <div class="left bicep">                           <div class="left forearm"></div>  
  25.                     </div>                   </div>  
  26.  <!-- left arm -->     
  27.                 <div class="right arm">                       <div class="right bicep">  
  28.                         <div class="right forearm"></div>                       </div>  
  29.                 </div>    <!-- right arm -->  
  30.                </div>  
  31.  <!-- torso -->           </div>  
  32.  <!-- me -->     
  33.         <div class="overlay"></div>       </div>  
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
浙江体彩6 1号码分布 福彩双色球红蓝走势图 河北福彩20选5和尾数走势图 河北福彩20选5除五走势图 河南福彩22选5走势图 福彩双色球周二走势图 福彩双色球斜连走势图 河北福彩排列7和值走势图 体彩排列5双期走势图浙江体彩6 1质合走势图 浙江体彩6 1历史开奖号码 江苏体彩七位数游戏规则 南粤风采36选7单期走势图 体彩排列5双期走势图 体彩排列3五行分布走势图 双色球走势图带连线 齐鲁风采23选5和值走势图 齐鲁风采23选5连号分布图 浙江体彩6 1走势图 江苏体彩七位数和值走势图 体彩排列3遗漏统计