今天分享给大家的是一个用纯css3实现的人物行走动画，在没有使用javascript的情况下，用css3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用css3的动画属性将这些图片串联起来形成人物行走动画效果。
在线演示源码下载
html代码<p id="canvas">         <p class="sky">             <p class="cloud-1"></p>             <p class="cloud-2"></p>             <p class="cloud-3"></p>             <p class="cloud-4"></p>             <p class="cloud-5"></p>             <p class="cloud-6"></p>             <p class="cloud-7"></p>             <p class="cloud-8"></p>         </p>         <p class="horizon"></p>         <p class="ground">             <p class="sign-best"></p>             <p class="sign-no-js"></p>             <p class="sign-lots-of-ps"></p>             <p class="sign-all-css"></p>         </p>         <!-- skeleton and shadow -->         <p class="shadow"></p>         <p class="me">             <p class="torso">                 <p class="left leg">                     <p class="left thigh">                         <p class="left shin">                             <p class="left foot">                                 <p class="left toes"></p>                             </p>                         </p>                     </p>                 </p>  <!-- left leg -->                 <p class="right leg">                     <p class="right thigh">                         <p class="right shin">                             <p class="right foot">                                 <p class="right toes"></p>                             </p>                         </p>                     </p>                 </p>  <!-- right leg -->                 <p class="left arm">                     <p class="left bicep">                         <p class="left forearm"></p>                     </p>                 </p>  <!-- left arm -->                 <p class="right arm">                     <p class="right bicep">                         <p class="right forearm"></p>                     </p>                 </p>  <!-- right arm -->             </p>  <!-- torso -->         </p>  <!-- me -->         <p class="overlay"></p>     </p>
基本css代码#canvas {     height: 600px;     width: 760px;     margin: 0;     padding: 0;     position: relative;     overflow: hidden; } #canvas p {     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 p:not(.overlay) {     border: 1px solid black; } #canvas:target p.me p{     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 p {     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.arm {     top: 93px;     -webkit-animation-name: right-bicep;     -moz-animation-name: right-bicep;     -ms-animation-name: right-bicep;     -o-animation-name: right-bicep;     animation-name: 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.bicep { background-image: url(images/me/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.forearm {     background-image: url(images/me/right-forearm.png);     -webkit-animation-name: right-forearm;     -moz-animation-name: right-forearm;     -ms-animation-name: right-forearm;     -o-animation-name: right-forearm;     animation-name: 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.leg {     top: 235px;     -webkit-animation-name: right-thigh;     -moz-animation-name: right-thigh;     -ms-animation-name: right-thigh;     -o-animation-name: right-thigh;     animation-name: 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.thigh { background-image: url(images/me/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.shin {     -webkit-animation-name: right-shin;     -moz-animation-name: right-shin;     -ms-animation-name: right-shin;     -o-animation-name: right-shin;     animation-name: 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.foot {     -webkit-animation-name: right-foot;     -moz-animation-name: right-foot;     -ms-animation-name: right-foot;     -o-animation-name: right-foot;     animation-name: 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.toes {     -webkit-animation-name: right-toes;     -moz-animation-name: right-toes;     -ms-animation-name: right-toes;     -o-animation-name: right-toes;     animation-name: 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: 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 */ p.right.arm { z-index: 1; } p.left.arm { z-index: -3; } p.arm > p.bicep > p.forearm { z-index: -1; } p.right.leg { z-index: -1; } p.left.leg { z-index: -2; } p.leg > p.thigh > p.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.png) repeat-y top right; } .sky p {     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; } .ground p {     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-ps {     width: 102px; height: 120px;     top: 345px; left: 1150px;     background-image: url(images/signs/lots-of-ps.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动画相关代码@-webkit-keyframes me {     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-keyframes right-bicep {     0%   { -webkit-transform: rotate(26deg); }     50%  { -webkit-transform: rotate(-20deg); }     100% { -webkit-transform: rotate(26deg); } } @-webkit-keyframes left-bicep {     0%   { -webkit-transform: rotate(-20deg); }     50%  { -webkit-transform: rotate(26deg); }     100% { -webkit-transform: rotate(-20deg); } } @-webkit-keyframes right-forearm {     0%   { -webkit-transform: rotate(-10deg); }     50%  { -webkit-transform: rotate(-45deg); }     100% { -webkit-transform: rotate(-10deg); } } @-webkit-keyframes left-forearm {     0%   { -webkit-transform: rotate(-45deg); }     50%  { -webkit-transform: rotate(-10deg); }     100% { -webkit-transform: rotate(-45deg); } } @-webkit-keyframes right-thigh {     0%   { -webkit-transform: rotate(-45deg); }     50%  { -webkit-transform: rotate(10deg); }     100% { -webkit-transform: rotate(-45deg); } } @-webkit-keyframes left-thigh {     0%   { -webkit-transform: rotate(10deg); }     50%  { -webkit-transform: rotate(-45deg); }     100% { -webkit-transform: rotate(10deg); } } @-webkit-keyframes right-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-keyframes left-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-keyframes right-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-keyframes left-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-keyframes right-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-keyframes left-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-keyframes shadow {     0%   { opacity: 1; }     25%  { opacity: 0.75; }     50%  { opacity: 1; }     75%  { opacity: 0.75; }     100% { opacity: 1; } } @-webkit-keyframes prop-600 {     0%   { -webkit-transform: translatex(0px); }     100% { -webkit-transform: translatex(-600px); } } @-webkit-keyframes prop-1200 {     0%   { -webkit-transform: translatex(0px); }     100% { -webkit-transform: translatex(-1200px); } } @-webkit-keyframes prop-2000 {     0%   { -webkit-transform: translatex(0px); }     100% { -webkit-transform: translatex(-2000px); } }
以上就是使用纯css3人物行走动画实例代码的详细内容。