Html部分:
<div class="fa">
<div class="fa-one">
<div class="son-a" style="background-color: red;">0</div>
<div class="son-a" style="background-color: orange;">1</div>
<div class="son-a" style="background-color: yellow;">2</div>
<div class="son-a" style="background-color: green;">3</div>
<div class="son-a" style="background-color: blue;">4</div>
</div>
</div>
CSS部分:
*{
padding: 0;
margin: 0;
}
.fa{
width: 1200px;
height:600px;
margin: 0 auto;
overflow: hidden;
}
.fa-one{
width: 500%;
height: 100%;
position: relative;
animation: aa 10s infinite ease-in-out;
}
.son-a{
width: 20%;
height: 100%;
text-align: center;
line-height: 600px;
font-size: 100px;
float: left;
}
#aa{
width: 100px;
height: 60px;
margin: 0 auto;
}
@keyframes aa{
0%{
left: -0px;
}
20%{
left: -1200px;
}
40%{
left: -2400px;
}
60%{
left: -3600px;
}
80%{
left: -4800px;
}
100%{
left:-0px;
}
}