H5用css3寫一個(gè)火柴人來回奔跑
效果地址 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>
作者：吃盖浇饭
链接：https://www.jianshu.com/p/01282dc7923f
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦