What I share with you today is a character walking animation implemented using pure CSS3. Without using JavaScript, CSS3 technology is used to depict the character's walking posture very realistically. In fact, the principle of animation implementation is relatively simple. Divide the character's state when walking into multiple pictures, and then use the animation properties of CSS3 to connect these pictures in series to form the character's walking animation effect.
<p> </p><p> </p><p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p> </p><p></p> <p></p> <p></p> <p></p> <!-- skeleton and shadow --> <p></p> <p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p></p> <!-- left leg --> <p> </p><p> </p><p> </p><p> </p><p></p> <!-- right leg --> <p> </p><p> </p><p></p> <!-- left arm --> <p> </p><p> </p><p></p> <!-- right arm --> <!-- torso --> <!-- me --> <p></p>
#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;
}@-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); }
}The above is the detailed content of Using pure CSS3 character walking animation example code. For more information, please follow other related articles on the PHP Chinese website!
css3 tutorial
What are the css3 gradient properties?
Tutorial on making inscribed coins
What does mobile phone hd mean?
The difference between WeChat service account and official account
How to reference css in html
Three commonly used encoding methods
Is the higher the computer CPU frequency, the better?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
