php人物行走,非常震撼的纯CSS3人物行走动画

#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:target div:not(.overlay) {

border:1pxsolidblack;

}

#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: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: 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-ytopleft,

url(images/misc/gradient-rightright.png)repeat-ytoprightright;

}

.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 {

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 div {

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;

}