搜索
您的当前位置：首页使用纯CSS3人物行走动画实例代码

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

时间：2020-11-27 来源：智榕旅游
今天分享给大家的是一个用纯CSS3实现的人物行走动画，在没有使用JavaScript的情况下，用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的，将人物行走时的状态分割成多张图片，然后利用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); }
}

Copyright © 2019- 版权所有

Top