本篇内容介绍了“利用CSS3实现人物行走动画实例代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
效果如下:
HTML代码
XML/HTML Code复制内容到剪贴板
<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>
基本CSS代码
CSS Code复制内容到剪贴板
#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;
}
.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: 3px 7px;
-moz-transform-origin: 3px 7px;
-ms-transform-origin: 3px 7px;
-o-transform-origin: 3px 7px;
transform-origin: 3px 7px;
}
.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: 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;
}
.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: 30px 25px;
-moz-transform-origin: 30px 25px;
-ms-transform-origin: 30px 25px;
-o-transform-origin: 30px 25px;
transform-origin: 30px 25px;
}
.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;
}
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-y top left,
url(images/misc/gradient-rightright.png) repeat-y top rightright;
}
.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动画相关代码
CSS Code复制内容到剪贴板
@-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 rightright-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 rightright-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 rightright-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 rightright-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 rightright-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 rightright-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); }
}
“利用CSS3实现人物行走动画实例代码”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!