南强小屋 Design By 杰米
本文分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真。其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多张图片,然后利用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;
- }
- /* setting proper z-indexes so that limbs show up correctly */
- 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,人物行走
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无非常震撼的纯CSS3人物行走动画的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?