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

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

#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;  } .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 */ div.right.arm { z-index: 1; } div.left.arm { z-index: -3; } div.arm > div.bicep > div.forearm { z-index: -1; } div.right.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-right.png) repeat-y top right;  } .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;  }

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