创建一个大盒子里面包含几张图片。

<div class="box">
    <ul>
      <li><a href="#"><img src="./img/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/5.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/7.jpg" alt=""></a></li>
    </ul>
  </div>

样式：

 .box{
      width: 700px;
      height: 150px;
      border: 3px solid black;
      margin: 100px auto;
      overflow: hidden;
    }

    .box li{
      list-style: none;
      width: 250px;
      height: 150px;
      float: left;
    }

    .box img{
      width: 100%;
      height: 100%;
    }
    .box ul{
      width: 1750px;
    }

定义动画：

@keyframes move{
      to{
        transform: translateX(-1750px);
      }
    }

调用动画：

因为是ul在滚动，所以直接在ul上调用动画。

.box ul{
      animation: move 5s linear infinite;
    }

效果：

这样的话后面会出现空白图片，所以我们可以将前可见的几张复制放到图片的最后当障眼法。

<div class="box">
    <ul>
      <li><a href="#"><img src="./img/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/5.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/7.jpg" alt=""></a></li>
      <!--复制可见前三张当障眼法，实现无缝滚动-->
      <li><a href="#"><img src="./img/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
    </ul>
  </div>

更改样式：

因为添加了几张图片，所以ul的宽度也要增加。

.box ul{
      width: 2500px;
    }

动画移动像素不变。

效果：

鼠标经过停止动画

/* 停止动画  鼠标经过box 但是停止的是 ul */
    .box:hover ul {
      animation-play-state: paused;
    }

效果：