本文分享给大家的是一个用纯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; } .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: 3px 7px; -moz-transform-origin: 3px 7px; -ms-transform-origin: 3px 7px; -o-transform-origin: 3px 7px; transform-origin: 3px 7px; } .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: 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 { 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: 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 { 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%; } .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; } /* 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%; background: url(images/misc/gradient-left.png) repeat-y top left, url(images/misc/gradient-rightright.png) repeat-y top rightright; } .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 {
