小人奔跑
定位 层级和动画的完美融合
效果图
有点吃藕了，图片不重要
<!doctype html>
<html><!--根标签-->
<head> <!--不可视区域-->
<meta charset="UTF-8"><!--国际编码-->
<!--网页三要素-->
<meta name="Keywords" content="关键字">
<meta name='Description' content="描述">
<title>奔跑的小人</title>
<style>
*{margin: 0;padding: 0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
img{border:0;}
body{
background-color:#cc9900;
}
.wrap{
position: relative;
width: 200px;
height: 300px;
margin:100px;
animation:run 10s infinite linear;
}
.head{
position: relative;
width: 30px;
height: 30px;
border:4px solid #fff;
border-radius:50%;
transform-origin:bottom center;
animation:head 1s infinite alternate linear;
}
.head:before{
position: absolute;
top:-8px;
left:-10px;
content:"";
width: 50px;
height: 18px;
background-color:#00ff00;
border-radius:10px 10px 0 0;
}
.head:after{
position: absolute;
top:-18px;
left:5px;
content:"";
width: 20px;
height: 20px;
background-color:#00ff00;
border-radius:10px 10px 0 0;
}
.body{
position: absolute;
top:44px;
left:11px;
height: 75px;
width: 15px;
background-color: #fff;
}
.body:after{
position: absolute;
top:-5px;
left:4px;
content:"";
width: 8px;
height: 5px;
background-color:#fff;
}
.hand{
position: absolute;
top:50px;
left:14px;
height: 38px;
width: 10px;
background-color: #f66;
border-radius:5px 5px 0 0;
animation:hand 1s infinite alternate linear;
transform-origin:top center;
}
.left-hand{
z-index:-1;
}
.hand:after{
position: absolute;
bottom:-10px;
left:-1px;
content:"";
width: 12px;
height: 12px;
background-color:#ff3300;
border-radius:50%;
}
.foot{
/* z-index:-1; */
position: absolute;
top: 118px;
left:12px;
height: 60px;
width: 12px;
background-color: #060;
animation:foot 1s infinite alternate linear;
transform-origin:top center;
}
.kucha{
position: absolute;
top: 103px;
left:-28px;
height: 0px;
width: 18px;
border-width:0 37px 29px 37px;
border-style:none solid solid;
border-color:transparent transparent red;
}
.foot:after{
content:"";
position: absolute;
bottom:-10px;
left:-2px;
width: 20px;
height: 10px;
background-color:#000;
border-radius:5px 10px 0 0;
}
@keyframes hand{
0%{transform:rotate(30deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(-45deg);}
}
.left-hand{
animation-delay:1s;
}
@keyframes foot{
0%{transform:rotate(30deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(-45deg);}
}
.right-foot{
/* z-index:-2; */
animation-delay:1s;
}
@keyframes head{
0%{transform:rotate(10deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(-10deg);}
}
@keyframes run{
0%{transform:translateX(-300px);}
100%{transform:translateX(1400px);}
}
</style>
</head>
<body><!--可视化区域-->
<p class="wrap">
<p class="head"></p>
<p class="body"></p>
<p class="left-hand hand"></p>
<p class="right-hand hand"></p>
<p class="foot left-foot"></p>
<p class="foot right-foot"></p>
<p class="kucha"></p>
</p>
</body>
</html>
相关阅读
主页：index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.bai
近期，Keep推出了会员付费服务“智能训练计划”。很多人会问这个计划真的够智能吗？能带给用户差异化体验吗？能够激发用户自律健身的内
互联网产品相对于传统软件产品，最大的区别是需要快速迭代。团队信息共享是帮助产品快速迭代的一大法宝：可以减少团队沟通成本、增强
[color=red]转载请注明出处[/color] 在sina微博上看到街旁网的客户端有一个分享足迹的功能，它可以显示我当前的位置，将微博头像标
参考:https://www.jianshu.com/p/43f54e4b3dc1 http://www.07net01.com/2016/01/1201188.html http://www.cnblogs.com/xiao