<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小人动画效果案例</title>
<style>
.one{
position: relative;
}
.ren1{
position: absolute;
bottom: 0px;
left: 0;
width: 154px;
height: 121px;
background: url(imggc_6d0e9e5.png) no-repeat;
animation: move 1s steps(2) infinite,move1 20s linear 0s infinite;
}
.ren2{
position: absolute;
bottom: 0px;
left: 0;
width: 165px;
height: 176px;
background: url(imggh_fee2457.png) no-repeat;
animation: move 1s steps(2) infinite,move2 20s linear 2s infinite;
}
.ren3{
position: absolute;
bottom: 0px;
left: 0;
width: 161px;
height: 149px;
background: url(imggl_c15cfd8.png) no-repeat;
animation: move 1s steps(2) infinite,move3 20s linear 4s infinite;
}
.ren4{
position: absolute;
bottom: 0px;
left: 0;
width: 185px;
height: 157px;
background: url(imggq_d281c9b.png) no-repeat;
animation: move 1s steps(2) infinite,move4 20s linear 6s infinite;
}
@keyframes move{
0%{
left: -308px;
}
100%{
background-position: -308px 0;
}
}
@keyframes move1{
0%{
left: -150px;
}
100%{
left: 1900px;
}
}
@keyframes move2{
0%{
left: -300px;
}
100%{
left: 1900px;
}
}
@keyframes move3{
0%{
left: -450px;
}
100%{
left: 1900px;
}
}
@keyframes move4{
0%{
left: -600px;
}
100%{
left: 1900px;
}
}
<×yle>
</head>
<body>
<div class="box">
<div class="ren1"></div>
<div class="ren2"></div>
<div class="ren3"></div>
<div class="ren4"></div>
</div>
</body>
<cml>