<style>
*{
margin: 0;
padding: 0;
}
.box{
/* 隐藏超过盒子的部分。 */
overflow: hidden;
margin: 100px auto;
width: 600px;
height: 150px;
border: 3px solid #000 ;
}
.box ul{
/* 调用动画。 */
animation: run 5s infinite linear;
/* 给ul足够的宽度,让li在一行显示。 */
width: 2000px;
}
.box li{
float: left;
width: 200px;
height: 150px;
}
.box img{
width: 100%;
height: 100%;
}
.box:hover ul{
/* ul滚动,所以暂停时应该暂停ul。 */
animation-play-state: paused;
}
@keyframes run{
to{
/* 让图片向左移动,故取值为负。 */
transform: translateX(-1400px);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
</ul>
</div>
</body>