<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>奔跑的小人</title>
<style>
* {
padding:0;
margin:0;
}
body {
background:#333;
}
.man {
width:100px;
height:200px;
position:absolute;
top:200px;
left:100px;
animation-name:run;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes run {
0% {
transform:translateX(0);
}
100% {
transform:translateX(1200px);
}
}.head {
width:50px;
height:60px;
border-radius:25px;
border:2px solid white;
margin:0 auto;
}
.body {
width:2px;
height:65px;
background:white;
margin:0 auto;
}
.hand-left,.hand-right {
width:40px;
height:50px;
border-left:2px solid white;
border-bottom:2px solid white;
position:absolute;
top:85px;
left:49px;
transform-origin:0 0;
}
.hand-left {
transform:rotate(45deg);
animation:hand-left 0.5s linear infinite;
}
@keyframes hand-left {
0% {
transform:rotate(60deg);
}
50% {
transform:rotate(-45deg);
}
100% {
transform:rotate(60deg);
}
}.hand-right {
transform:rotate(-45deg);
animation:hand-right 0.5s linear infinite;
}
@keyframes hand-right {
0% {
transform:rotate(-45deg);
}
50% {
transform:rotate(60deg);
}
100% {
transform:rotate(-45deg);
}
}.leg-left,.leg-right {
width:50px;
height:55px;
border-bottom:2px solid white;
border-right:2px solid white;
position:absolute;
top:128px;
transform-origin:100% 0;
}
.leg-left {
transform:rotate(45deg);
animation:leg-left 0.5s linear infinite;
}
@keyframes leg-left {
0% {
transform:rotate(45deg);
}
50% {
transform:rotate(-60deg);
}
100% {
transform:rotate(45deg);
}
}.leg-right {
transform:rotate(-80deg);
animation:leg-right 0.5s linear infinite;
}
@keyframes leg-right {
0% {
transform:rotate(-80deg);
}
50% {
transform:rotate(45deg);
}
100% {
transform:rotate(-80deg);
}
}</style>
</head>
<body>
<div class="man">
<div class="head"></div>
<div class="body"></div>
<div class="hand-left"></div>
<div class="hand-right"></div>
<div class="leg-left"></div>
<div class="leg-right"></div>
</div>
</body>
</html>
原创文章 65
获赞 73
访问量 7735