html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>throttle</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="main">
<div class="kuang">
<div class="maint" >
<div class="mitem">1</div>
<div class="mitem">2</div>
<div class="mitem">3</div>
<div class="mitem">4</div>
<div class="mitem">5</div>
<div class="mitem">6</div>
<div class="mitem">7</div>
<div class="mitem">8</div>
<div class="mitem">1</div>
<div class="mitem">2</div>
<div class="mitem">3</div>
<div class="mitem">4</div>
<div class="mitem">5</div>
<div class="mitem">6</div>
<div class="mitem">7</div>
<div class="mitem">8</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
css
*{margin: 0;padding: 0;}
body,
html{
width: 100%;height: 100%;
}
html { overflow-x: hidden; overflow-y: auto; }
.main {
width: 100%;
height: 500px;
background: deepskyblue;
display: flex;
align-items: center;
}
.main .kuang{
width:100%;
height: 250px;
padding-top: 25px;
box-sizing: border-box;
background: lightgreen;
overflow: hidden;
}
.main .kuang .maint{
width:500%;
position: absolute;
animation: donghua 20s linear infinite;
}
.main .kuang .maint .mitem{
width:4%;
height:200px;
float: left;
margin-left:1%;
border:1px solid #fff;
box-sizing: border-box;
border-radius: 10px;
background:rgba(255,255,255,0.3);
}
.main .kuang .maint:hover{
animation-play-state: paused;
}
@keyframes donghua{
0%{left:-0%;}
25%{left:-50%;}
50%{left:-100%;}
75%{left:-150%;}
100%{left:-200%;}
}