H5用css3写一个火柴人来回奔跑
2018-06-16 本文已影响92人
吃盖浇饭
效果地址 https://htmlzhoyan.github.io/Matchstick/
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
#container{
width: 1000px;
height: 400px;
background: darkcyan;
margin: 100px auto;
position:relative;
overflow: hidden;
}
.man{
position: absolute;
width: 60px;
height: 200px;
bottom: 0;
left: 10px;
animation: buffer 10s linear infinite;
perspective: 700px;
}
.man1{
left: 80px;
}
.man2{
left: 150px;
}
.man3{
left: 220px;
}
.man4{
left: 290px;
}
@keyframes buffer{
0%{transform:translateX(0px);}
50%{transform: translateX(950px);}
100%{transform:translateX(0px);}
}
.top{
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 50px;
position: absolute;
left: 5px;
top: 0;
background: #000;
animation: buffe 10s steps(1,end) infinite;
}
@keyframes buffe{
0%{transform:rotate(0deg);}
50%{transform:rotate(150deg);}
100%{transform:rotate(0deg);}
}
.top:before{
content: '';
display: inline-block;
background: #000;
width: 10px;
height: 10px;
border-radius: 10px;
position: absolute;
left: 25px;
top: 15px;
border: 5px solid#ccc;
}
.top:after{
content: '';
display: inline-block;
border: 5px solid #008B8B;
position: absolute;
left: 45px;
top: 30px;
border-left:20px solid #000;
transform: rotate(10deg);
}
.center{
width: 50px;
height: 100px;
position: absolute;
left: 5px;
top: 50px;
border-radius: 30px;
transform-style: preserve-3d;
transform: rotateY(85deg);
animation: funmove 0.5s step-end infinite;
}
@keyframes funmove{
0%{transform: rotateY(85deg)}
25%{transform: rotateY(0deg)}
50%{transform: rotateY(-50deg)}
75%{transform: rotateY(-85deg);}
100%{transform: rotateY(85deg);}
}
.item{
width: 50px;
height: 100px;
position: absolute;
background: rgba(88,213,20,0.8);
font-weight: 900;
border-radius: 30px;
}
.front{
transform:translateZ(20px);
}
.back{
transform:translateZ(-20px) rotateY(180deg);
}
.left{
transform:rotateY(-90deg) translateZ(20px);
}
.right{
transform:rotateY(90deg) translateZ(20px);
}
.footer1{
width: 5px;
height: 100px;
background: #000;
position: absolute;
bottom: 0;
left: 20px;
transform: rotate(20deg);
transform-origin: 100% 0;
animation: mMove1 1s linear infinite;
}
.man:before{
content: '';
display: inline-block;
width: 5px;
height: 80px;
background: #000;
position: absolute;
bottom: 50px;
left: 10px;
transform: rotate(-10deg);
transform-origin: 100% 0;
animation: mMove2 1s linear infinite;
}
.man:after{
content: '';
display: inline-block;
width: 5px;
height:80px;
background: #000;
position: absolute;
bottom: 50px;
left: 40px;
transform: rotate(-10deg);
transform-origin: 100% 0;
animation: mMove1 1s linear infinite;
}
@keyframes mMove1{
0%{transform:rotate(20deg);}
50%{transform: rotate(-10deg);}
100%{transform: rotate(20deg);}
}
.footer2{
width: 5px;
height: 100px;
background: #000;
position: absolute;
bottom: 0;
right: 20px;
transform: rotate(-20deg);
transform-origin: 100% 0;
animation: mMove2 1s linear infinite;
}
@keyframes mMove2{
0%{transform:rotate(-20deg);}
50%{transform: rotate(10deg);}
100%{transform: rotate(-20deg);}
}
</style>
</head>
<body>
<div id="container">
<div class="man">
<div class="top">
</div>
<div class="center">
<div class="item front"></div>
<div class="item back"></div>
<div class="item left"></div>
<div class="item right"></div>
</div>
<div class="footer1">
</div>
<div class="footer2">
</div>
</div>
<div class="man man1">
<div class="top">
</div>
<div class="center">
<div class="item front"></div>
<div class="item back"></div>
<div class="item left"></div>
<div class="item right"></div>
</div>
<div class="footer1">
</div>
<div class="footer2">
</div>
</div>
<div class="man man2">
<div class="top">
</div>
<div class="center">
<div class="item front"></div>
<div class="item back"></div>
<div class="item left"></div>
<div class="item right"></div>
</div>
<div class="footer1">
</div>
<div class="footer2">
</div>
</div>
<div class="man man3">
<div class="top">
</div>
<div class="center">
<div class="item front"></div>
<div class="item back"></div>
<div class="item left"></div>
<div class="item right"></div>
</div>
<div class="footer1">
</div>
<div class="footer2">
</div>
</div>
<div class="man man4">
<div class="top">
</div>
<div class="center">
<div class="item front"></div>
<div class="item back"></div>
<div class="item left"></div>
<div class="item right"></div>
</div>
<div class="footer1">
</div>
<div class="footer2">
</div>
</div>
</div>
</body>
</html>
