使用纯CSS3人物行走动画实例代码

#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: 124124px; 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;}

@-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); }}