本文分享给大家的是一个用纯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 {         height :  600px ;         width :  760px ;         margin : 0;         padding : 0;         position :  relative ;         overflow :  hidden ;    }       #canvas  div {         position :  absolute ;        -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) {         border :  1px   solid   black ;    }       #canvas :target div.me div{         background : rgba(255, 255, 255, 0.25);    }       .me {         top :  50px ;  left :  350px ;        -webkit-animation-name: me;        -moz-animation-name: me;        -ms-animation-name: me;        -o-animation-name: me;        animation-name: me;    }       .me, .me div {         background-repeat :  no-repeat ;        -webkit-animation-duration: 1750ms;        -moz-animation-duration: 1750ms;        -ms-animation-duration: 1750ms;        -o-animation-duration: 1750ms;        animation-duration: 1750ms;    }       .torso {         width :  86px ;  height :  275px ;         background-image :  url (images/me/torso.png);    }       .arm {         left :  12px ;        -webkit-transform-origin:  20px   10px ;        -moz-transform-origin:  20px   10px ;        -ms-transform-origin:  20px   10px ;        -o-transform-origin:  20px   10px ;        transform-origin:  20px   10px ;    }       . right right .arm {         top :  93px ;        -webkit-animation-name:  right right -bicep;        -moz-animation-name:  right right -bicep;        -ms-animation-name:  right right -bicep;        -o-animation-name:  right right -bicep;        animation-name:  right right -bicep;    }    . left .arm {         top :  87px ;        -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 {         height :  124px ;  width :  51px ;    }       . right right .bicep {  background-image :  url (images/me/ right right -bicep.png); }    . left .bicep {  background-image :  url (images/me/ left -bicep.png); }       .forearm {         top :  108px ;  left :  14px ;         width :  36px ;  height :  121px ;        -webkit-transform-origin:  3px   7px ;        -moz-transform-origin:  3px   7px ;        -ms-transform-origin:  3px   7px ;        -o-transform-origin:  3px   7px ;        transform-origin:  3px   7px ;    }       . right right .forearm {         background-image :  url (images/me/ right right -forearm.png);        -webkit-animation-name:  right right -forearm;        -moz-animation-name:  right right -forearm;        -ms-animation-name:  right right -forearm;        -o-animation-name:  right right -forearm;        animation-name:  right right -forearm;    }       . left .forearm {         background-image :  url (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 {         left :  6px ;        -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;    }       . right right .leg {         top :  235px ;        -webkit-animation-name:  right right -thigh;        -moz-animation-name:  right right -thigh;        -ms-animation-name:  right right -thigh;        -o-animation-name:  right right -thigh;        animation-name:  right right -thigh;    }       . left .leg {         top :  225px ;        -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 {         width :  70px ;  height :  145px ;    }       . left .thigh {  background-image :  url (images/me/ left -thigh.png); }    . right right .thigh {  background-image :  url (images/me/ right right -thigh.png); }       .shin {         top :  115px ;         width :  50px ;  height :  170px ;         background-image :  url (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 ;    }       . right right .shin {        -webkit-animation-name:  right right -shin;        -moz-animation-name:  right right -shin;        -ms-animation-name:  right right -shin;        -o-animation-name:  right right -shin;        animation-name:  right right -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 {         top :  155px ;  left :  2px ;         width :  67px ;  height :  34px ;         background-image :  url (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%;    }       . right right .foot {        -webkit-animation-name:  right right -foot;        -moz-animation-name:  right right -foot;        -ms-animation-name:  right right -foot;        -o-animation-name:  right right -foot;        animation-name:  right right -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 {         top :  9px ;  left :  66px ;         width :  28px ;  height :  25px ;         background-image :  url (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%;    }       . right right .toes {        -webkit-animation-name:  right right -toes;        -moz-animation-name:  right right -toes;        -ms-animation-name:  right right -toes;        -o-animation-name:  right right -toes;        animation-name:  right right -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 {         width :  200px ;  height :  70px ;         left :  270px ;  bottom bottom :  5px ;         background-image :  url (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. right right .arm {  z-index : 1; }    div. left .arm {  z-index : -3; }    div.arm > div.bicep > div.forearm {  z-index : -1; }       div. right right .leg {  z-index : -1; }    div. left .leg {  z-index : -2; }    div.leg > div.thigh > div.shin {  z-index : -1; }       .overlay {         width : 100%;  height : 100%;         background :  url (images/misc/gradient- left .png)  repeat -y  top   left ,                     url (images/misc/gradient- right right .png)  repeat -y  top   right right ;    }       .sky div {         background-repeat :  no-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 {         width :  82px ;  height :  90px ;         background-image :  url (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 {         top :  70px ;         width :  159px ;  height :  90px ;         background-image :  url (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 {         top :  30px ;         width :  287px ;  height :  62px ;         background-image :  url (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 {         top :  100px ;         width :  94px ;  height :  81px ;         background-image :  url (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 {  left :  0px ; }    .cloud-2 {  left :  1200px ; }       .cloud-3 {  left :  250px ; }    .cloud-4 {  left :  1450px ; }       .cloud-5 {  left :  500px ; }    .cloud-6 {  left :  1700px ; }       .cloud-7 {  left :  950px ; }    .cloud-8 {  left :  2150px ; }       .horizon {         首页 > 软件教程