今天分享給大家的是一個用純CSS3實現的人物行走動畫，在沒有使用JavaScript的情況下，用CSS3技術將人物行走的姿態描繪得非常逼真。其實動畫實現的原理也是比較簡單的，將人物行走時的狀態分割成多張圖片，然后利用CSS3的動畫屬性將這些圖片串聯起來形成人物行走動畫效果。

HTML代碼

基本CSS代碼#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;

}

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

}http://www.codeceo.com/article/pure-css3-person-walking.html

本文作者：碼農網?– 小峰

總結

以上是生活随笔為你收集整理的php人物行走,非常震撼的纯CSS3人物行走动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。