非常震撼的纯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>    <!-- left leg -->                      <div class="right leg">                       <div class="right thigh">                           <div class="right shin">                               <div class="right foot">                                   <div class="right toes"></div>                               </div>                           </div>                       </div>                   </div>    <!-- right leg -->                      <div class="left arm">                       <div class="left bicep">                           <div class="left forearm"></div>                       </div>                   </div>    <!-- left arm -->                      <div class="right arm">                       <div class="right bicep">                           <div class="right forearm"></div>                       </div>                   </div>    <!-- right arm -->                  </div>    <!-- torso -->           </div>    <!-- me -->              <div class="overlay"></div>       </div>  

基本CSS代码

CSS Code复制内容到剪贴板 #canvas {        height600px;        width760px;        margin: 0;        padding: 0;        positionrelative;        overflowhidden;    }       #canvas div {        positionabsolute;        -webkit-animation-iteration-count: infinite;        -moz-animation-iteration-count: infinite;        -ms-animation-iteration-count: infinite;        -o-animation-iteration-count: infinite;        animation-iteration-count: infinite;           -webkit-animation-timing-function: linear;        -moz-animation-timing-function: linear;        -ms-animation-timing-function: linear;        -o-animation-timing-function: linear;        animation-timing-function: linear;    }       #canvas:target div:not(.overlay) {        border1px solid black;    }       #canvas:target div.me div{        background: rgba(255, 255, 255, 0.25);    }       .me {        top50pxleft350px;        -webkit-animation-name: me;        -moz-animation-name: me;        -ms-animation-name: me;        -o-animation-name: me;        animation-name: me;    }       .me, .me div {        background-repeatno-repeat;        -webkit-animation-duration: 1750ms;        -moz-animation-duration: 1750ms;        -ms-animation-duration: 1750ms;        -o-animation-duration: 1750ms;        animation-duration: 1750ms;    }       .torso {        width86pxheight275px;        background-imageurl(images/me/torso.png);    }       .arm {        left12px;        -webkit-transform-origin: 20px 10px;        -moz-transform-origin: 20px 10px;        -ms-transform-origin: 20px 10px;        -o-transform-origin: 20px 10px;        transform-origin: 20px 10px;    }       .rightright.arm {        top93px;        -webkit-animation-name: rightright-bicep;        -moz-animation-name: rightright-bicep;        -ms-animation-name: rightright-bicep;        -o-animation-name: rightright-bicep;        animation-name: rightright-bicep;    }    .left.arm {        top87px;        -webkit-animation-name: left-bicep;        -moz-animation-name: left-bicep;        -ms-animation-name: left-bicep;        -o-animation-name: left-bicep;        animation-name: left-bicep;    }       .bicep {        height124pxwidth51px;    }       .rightright.bicep { background-imageurl(images/me/rightright-bicep.png); }    .left.bicep { background-imageurl(images/me/left-bicep.png); }       .forearm {        top108pxleft14px;        width36pxheight121px;        -webkit-transform-origin: 3px 7px;        -moz-transform-origin: 3px 7px;        -ms-transform-origin: 3px 7px;        -o-transform-origin: 3px 7px;        transform-origin: 3px 7px;    }       .rightright.forearm {        background-imageurl(images/me/rightright-forearm.png);        -webkit-animation-name: rightright-forearm;        -moz-animation-name: rightright-forearm;        -ms-animation-name: rightright-forearm;        -o-animation-name: rightright-forearm;        animation-name: rightright-forearm;    }       .left.forearm {        background-imageurl(images/me/left-forearm.png);        -webkit-animation-name: left-forearm;        -moz-animation-name: left-forearm;        -ms-animation-name: left-forearm;        -o-animation-name: left-forearm;        animation-name: left-forearm;    }       .leg {        left6px;        -webkit-transform-origin: 30px 20px;        -moz-transform-origin: 30px 20px;        -ms-transform-origin: 30px 20px;        -o-transform-origin: 30px 20px;        transform-origin: 30px 20px;        -webkit-animation-name: thigh;        -moz-animation-name: thigh;        -ms-animation-name: thigh;        -o-animation-name: thigh;        animation-name: thigh;    }       .rightright.leg {        top235px;        -webkit-animation-name: rightright-thigh;        -moz-animation-name: rightright-thigh;        -ms-animation-name: rightright-thigh;        -o-animation-name: rightright-thigh;        animation-name: rightright-thigh;    }       .left.leg {        top225px;        -webkit-animation-name: left-thigh;        -moz-animation-name: left-thigh;        -ms-animation-name: left-thigh;        -o-animation-name: left-thigh;        animation-name: left-thigh;    }       .thigh {        width70pxheight145px;    }       .left.thigh { background-imageurl(images/me/left-thigh.png); }    .rightright.thigh { background-imageurl(images/me/rightright-thigh.png); }       .shin {        top115px;        width50pxheight170px;        background-imageurl(images/me/shin.png);        -webkit-transform-origin: 30px 25px;        -moz-transform-origin: 30px 25px;        -ms-transform-origin: 30px 25px;        -o-transform-origin: 30px 25px;        transform-origin: 30px 25px;    }       .rightright.shin {        -webkit-animation-name: rightright-shin;        -moz-animation-name: rightright-shin;        -ms-animation-name: rightright-shin;        -o-animation-name: rightright-shin;        animation-name: rightright-shin;    }    .left.shin {        -webkit-animation-name: left-shin;        -moz-animation-name: left-shin;        -ms-animation-name: left-shin;        -o-animation-name: left-shin;        animation-name: left-shin;    }       .foot {        top155pxleft2px;        width67pxheight34px;        background-imageurl(images/me/foot.png);        -webkit-transform-origin: 0 50%;        -moz-transform-origin: 0 50%;        -ms-transform-origin: 0 50%;        -o-transform-origin: 0 50%;        transform-origin: 0 50%;    }       .rightright.foot {        -webkit-animation-name: rightright-foot;        -moz-animation-name: rightright-foot;        -ms-animation-name: rightright-foot;        -o-animation-name: rightright-foot;        animation-name: rightright-foot;    }    .left.foot {        -webkit-animation-name: left-foot;        -moz-animation-name: left-foot;        -ms-animation-name: left-foot;        -o-animation-name: left-foot;        animation-name: left-foot;    }       .toes {        top9pxleft66px;        width28pxheight25px;        background-imageurl(images/me/toes.png);        -webkit-transform-origin: 0% 100%;        -moz-transform-origin: 0% 100%;        -ms-transform-origin: 0% 100%;        -o-transform-origin: 0% 100%;        transform-origin: 0% 100%;    }       .rightright.toes {        -webkit-animation-name: rightright-toes;        -moz-animation-name: rightright-toes;        -ms-animation-name: rightright-toes;        -o-animation-name: rightright-toes;        animation-name: rightright-toes;    }    .left.toes {        -webkit-animation-name: left-toes;        -moz-animation-name: left-toes;        -ms-animation-name: left-toes;        -o-animation-name: left-toes;        animation-name: left-toes;    }       .shadow {        width200pxheight70px;        left270pxbottombottom5px;        background-imageurl(images/misc/shadow.png);        -webkit-animation-name: shadow;        -moz-animation-name: shadow;        -ms-animation-name: shadow;        -o-animation-name: shadow;        animation-name: shadow;    }       /* setting proper z-indexes so that limbs show up correctly */      div.rightright.arm { z-index: 1; }    div.left.arm { z-index: -3; }    div.arm > div.bicep > div.forearm { z-index: -1; }       div.rightright.leg { z-index: -1; }    div.left.leg { z-index: -2; }    div.leg > div.thigh > div.shin { z-index: -1; }       .overlay {        width: 100%; height: 100%;        backgroundurl(images/misc/gradient-left.png) repeat-y top left,                    url(images/misc/gradient-rightright.png) repeat-y top rightright;    }       .sky div {        background-repeatno-repeat;        -webkit-animation-name: prop-1200;        -moz-animation-name: prop-1200;        -ms-animation-name: prop-1200;        -o-animation-name: prop-1200;        animation-name: prop-1200;    }       .cloud-1, .cloud-2 {        width82pxheight90px;        background-imageurl(images/clouds/1.png);        -webkit-animation-duration: 120s;        -moz-animation-duration: 120s;        -ms-animation-duration: 120s;        -o-animation-duration: 120s;        animation-duration: 120s;    }       .cloud-3, .cloud-4 {        top70px;        width159pxheight90px;        background-imageurl(images/clouds/2.png);        -webkit-animation-duration: 80s;        -moz-animation-duration: 80s;        -ms-animation-duration: 80s;        -o-animation-duration: 80s;        animation-duration: 80s;    }       .cloud-5, .cloud-6 {        top30px;        width287pxheight62px;        background-imageurl(images/clouds/3.png);        -webkit-animation-duration: 140s;        -moz-animation-duration: 140s;        -ms-animation-duration: 140s;        -o-animation-duration: 140s;        animation-duration: 140s;    }       .cloud-7, .cloud-8 {        top100px;        width94pxheight81px;        background-imageurl(images/clouds/4.png);        -webkit-animation-duration: 90s;        -moz-animation-duration: 90s;        -ms-animation-duration: 90s;        -o-animation-duration: 90s;        animation-duration: 90s;    }       .cloud-1 { left0px; }    .cloud-2 { left1200px; }       .cloud-3 { left250px; }    .cloud-4 { left1450px; }       .cloud-5 { left500px; }    .cloud-6 { left1700px; }       .cloud-7 { left950px; }    .cloud-8 { left2150px; }       .horizon {        非常震撼的纯CSS3人物行走动画