版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86516283
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li><img src="img/1.jpg" alt="" width="200"></li>
<li><img src="img/2.jpg" alt="" width="200"></li>
<li><img src="img/3.jpg" alt="" width="200"></li>
<li><img src="img/1.jpg" alt="" width="200"></li>
<li><img src="img/2.jpg" alt="" width="200"></li>
<li><img src="img/3.jpg" alt="" width="200"></li>
<li><img src="img/1.jpg" alt="" width="200"></li>
<li><img src="img/1.jpg" alt="" width="200"></li>
<li><img src="img/2.jpg" alt="" width="200"></li>
<li><img src="img/3.jpg" alt="" width="200"></li>
<li><img src="img/1.jpg" alt="" width="200"></li>
<li><img src="img/2.jpg" alt="" width="200"></li>
<li><img src="img/3.jpg" alt="" width="200"></li>
<li><img src="img/1.jpg" alt="" width="200"></li>
<!--本来是7个图片，想实现无缝滚动，相当于2组图片-->
</ul>
</nav>
</body>
</html>CSS部分
ul{
list-style: none;
}
nav{
width: 1400px;
height: 150px;
border:1px solid red;
margin:100px auto;
overflow: hidden; /*溢出的隐藏*/
}
nav ul li{
float: left;
}
nav ul{
width: 200%;
/*宽度给2倍，因为2组图片，给一组图的宽度，剩下一组图会掉下去，显示两行，因为宽度不够*/
animation: moving 5s linear infinite;
/*linear 匀速*/
}
@keyframes moving {
from{
transform: translateX(0);
}
to{
transform: translateX(-1400px);
}
}
nav:hover ul{
animation-play-state: paused;/*鼠标经过暂停动画，一定是给ul加*/
}