本文分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用CSS3的动画属性将这些图片串联起来形成人物行走动画效果。
HTML代码
XML/HTML Code复制内容到剪贴板
<divid="canvas"><divclass="sky"><divclass="cloud-1"></div><divclass="cloud-2"></div><divclass="cloud-3"></div><divclass="cloud-4"></div><divclass="cloud-5"></div><divclass="cloud-6"></div><divclass="cloud-7"></div><divclass="cloud-8"></div></div><divclass="horizon"></div><divclass="ground"><divclass="sign-best"></div><divclass="sign-no-js"></div><divclass="sign-lots-of-divs"></div><divclass="sign-all-css"></div></div><!--skeletonandshadow--><divclass="shadow"></div><divclass="me"><divclass="torso"><divclass="leftleg"><divclass="leftthigh"><divclass="leftshin"><divclass="leftfoot"><divclass="lefttoes"></div></div></div></div></div><!--leftleg--><divclass="rightleg"><divclass="rightthigh"><divclass="rightshin"><divclass="rightfoot"><divclass="righttoes"></div></div></div></div></div><!--rightleg--><divclass="leftarm"><divclass="leftbicep"><divclass="leftforearm"></div></div></div><!--leftarm--><divclass="rightarm"><divclass="rightbicep"><divclass="rightforearm"></div></div></div><!--rightarm--></div><!--torso--></div><!--me--><divclass="overlay"></div></div>基本CSS代码
CSS Code复制内容到剪贴板
#canvas{height:600px;width:760px;margin:0;padding:0;position:relative;overflow:hidden;}#canvasdiv{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:targetdiv:not(.overlay){border:1pxsolidblack;}#canvas:targetdiv.mediv{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,.mediv{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:20px10px;-moz-transform-origin:20px10px;-ms-transform-origin:20px10px;-o-transform-origin:20px10px;transform-origin:20px10px;}.rightright.arm{top:93px;-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{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;}.rightright.bicep{background-image:url(images/me/rightright-bicep.png);}.left.bicep{background-image:url(images/me/left-bicep.png);}.forearm{top:108px;left:14px;width:36px;height:121px;-webkit-transform-origin:3px7px;-moz-transform-origin:3px7px;-ms-transform-origin:3px7px;-o-transform-origin:3px7px;transform-origin:3px7px;}.rightright.forearm{background-image:url(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-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:30px20px;-moz-transform-origin:30px20px;-ms-transform-origin:30px20px;-o-transform-origin:30px20px;transform-origin:30px20px;-webkit-animation-name:thigh;-moz-animation-name:thigh;-ms-animation-name:thigh;-o-animation-name:thigh;animation-name:thigh;}.rightright.leg{top:235px;-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{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);}.rightright.thigh{background-image:url(images/me/rightright-thigh.png);}.shin{top:115px;width:50px;height:170px;background-image:url(images/me/shin.png);-webkit-transform-origin:30px25px;-moz-transform-origin:30px25px;-ms-transform-origin:30px25px;-o-transform-origin:30px25px;transform-origin:30px25px;}.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{top:155px;left:2px;width:67px;height:34px;background-image:url(images/me/foot.png);-webkit-transform-origin:050%;-moz-transform-origin:050%;-ms-transform-origin:050%;-o-transform-origin:050%;transform-origin:050%;}.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{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%;}.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{width:200px;height:70px;left:270px;bottombottom: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;}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%;background:url(images/misc/gradient-left.png)repeat-ytopleft,url(images/misc/gradient-rightright.png)repeat-ytoprightright;}.skydiv{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{top:350px;width:1800px;height:50px;background:url(images/misc/horizon.png)repeat-x;-webkit-animation-name:prop-600;-moz-animation-name:prop-600;-ms-animation-name:prop-600;-o-animation-name:prop-600;animation-name:prop-600;-webkit-animation-duration:40s;-moz-animation-duration:40s;-ms-animation-duration:40s;-o-animation-duration:40s;animation-duration:40s;}.grounddiv{background-repeat:no-repeat;-webkit-animation-name:prop-2000;-moz-animation-name:prop-2000;-ms-animation-name:prop-2000;-o-animation-name:prop-2000;animation-name:prop-2000;}.sign-all-css{width:160px;height:188px;top:325px;left:1600px;background-image:url(images/signs/all-css.png);-webkit-animation-duration:35s;-moz-animation-duration:35s;-ms-animation-duration:35s;-o-animation-duration:35s;animation-duration:35s;}.sign-lots-of-divs{width:102px;height:120px;top:345px;left:1150px;background-image:url(images/signs/lots-of-divs.png);-webkit-animation-duration:56s;-moz-animation-duration:56s;-ms-animation-duration:56s;-o-animation-duration:56s;animation-duration:56s;}.sign-no-js{width:65px;height:77px;top:348px;left:1150px;background-image:url(images/signs/no-js.png);-webkit-animation-duration:71s;-moz-animation-duration:71s;-ms-animation-duration:71s;-o-animation-duration:71s;animation-duration:71s;}.sign-best{width:43px;height:50px;top:350px;left:1000px;background-image:url(images/signs/best.png);-webkit-animation-duration:95s;-moz-animation-duration:95s;-ms-animation-duration:95s;-o-animation-duration:95s;animation-duration:95s;}CSS动画相关代码
CSS Code复制内容到剪贴板
@-webkit-keyframesme{0%{-webkit-transform:rotate(5deg)translate(5px,0px);}25%{-webkit-transform:rotate(5deg)translate(-5px,-14px);}50%{-webkit-transform:rotate(5deg)translate(5px,0px);}75%{-webkit-transform:rotate(5deg)translate(-5px,-14px);}100%{-webkit-transform:rotate(5deg)translate(5px,0px);}}@-webkit-keyframesrightright-bicep{0%{-webkit-transform:rotate(26deg);}50%{-webkit-transform:rotate(-20deg);}100%{-webkit-transform:rotate(26deg);}}@-webkit-keyframesleft-bicep{0%{-webkit-transform:rotate(-20deg);}50%{-webkit-transform:rotate(26deg);}100%{-webkit-transform:rotate(-20deg);}}@-webkit-keyframesrightright-forearm{0%{-webkit-transform:rotate(-10deg);}50%{-webkit-transform:rotate(-45deg);}100%{-webkit-transform:rotate(-10deg);}}@-webkit-keyframesleft-forearm{0%{-webkit-transform:rotate(-45deg);}50%{-webkit-transform:rotate(-10deg);}100%{-webkit-transform:rotate(-45deg);}}@-webkit-keyframesrightright-thigh{0%{-webkit-transform:rotate(-45deg);}50%{-webkit-transform:rotate(10deg);}100%{-webkit-transform:rotate(-45deg);}}@-webkit-keyframesleft-thigh{0%{-webkit-transform:rotate(10deg);}50%{-webkit-transform:rotate(-45deg);}100%{-webkit-transform:rotate(10deg);}}@-webkit-keyframesrightright-shin{0%{-webkit-transform:rotate(30deg);}25%{-webkit-transform:rotate(20deg);}50%{-webkit-transform:rotate(20deg);}75%{-webkit-transform:rotate(85deg);}100%{-webkit-transform:rotate(30deg);}}@-webkit-keyframesleft-shin{0%{-webkit-transform:rotate(20deg);}25%{-webkit-transform:rotate(85deg);}50%{-webkit-transform:rotate(30deg);}75%{-webkit-transform:rotate(20deg);}100%{-webkit-transform:rotate(20deg);}}@-webkit-keyframesrightright-foot{0%{-webkit-transform:rotate(-5deg);}25%{-webkit-transform:rotate(-7deg);}50%{-webkit-transform:rotate(-16deg);}75%{-webkit-transform:rotate(-10deg);}100%{-webkit-transform:rotate(-5deg);}}@-webkit-keyframesleft-foot{0%{-webkit-transform:rotate(-16deg);}25%{-webkit-transform:rotate(-10deg);}50%{-webkit-transform:rotate(-5deg);}75%{-webkit-transform:rotate(-7deg);}100%{-webkit-transform:rotate(-16deg);}}@-webkit-keyframesrightright-toes{0%{-webkit-transform:rotate(0deg);}25%{-webkit-transform:rotate(-10deg);}50%{-webkit-transform:rotate(-10deg);}75%{-webkit-transform:rotate(-25deg);}100%{-webkit-transform:rotate(0deg);}}@-webkit-keyframesleft-toes{0%{-webkit-transform:rotate(-10deg);}25%{-webkit-transform:rotate(-25deg);}50%{-webkit-transform:rotate(0deg);}75%{-webkit-transform:rotate(-10deg);}100%{-webkit-transform:rotate(-10deg);}}@-webkit-keyframesshadow{0%{opacity:1;}25%{opacity:0.75;}50%{opacity:1;}75%{opacity:0.75;}100%{opacity:1;}}@-webkit-keyframesprop-600{0%{-webkit-transform:translateX(0px);}100%{-webkit-transform:translateX(-600px);}}@-webkit-keyframesprop-1200{0%{-webkit-transform:translateX(0px);}100%{-webkit-transform:translateX(-1200px);}}@-webkit-keyframesprop-2000{0%{-webkit-transform:translateX(0px);}100%{-webkit-transform:translateX(-2000px);}}以上就是本文的全部内容，希望对大家的学习有所帮助。
