<style>
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
width: 600px;
height: 150px;
border: 3px solid #000;
margin: 100px auto;
}
.box ul{
list-style: none;
width: 2000px;
animation: run 15s linear infinite;
}
.box:hover ul{
animation-play-state: paused;
}
.box li{
float: left;
}
.box li a{
text-decoration: none;
}
.box li a img{
width: 200px;
height: 150px;
}
@keyframes run {
0%{
transform: translate(0,0);
}
100%{
transform: translate(-1400px,0);
}
}
</style>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/7.jpg" alt=""></a></li>
</ul>
<!-- 做一个视觉差,补前面三张图片 -->
<ul>
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
</ul>
<ul>
<li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
04-24
4138
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-06
6083
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-07
1201
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-16