SOURCE

<div class="outer">
    <div class="img-container">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/1.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/2.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/3.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/4.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/5.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/6.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/7.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/1.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/2.jpg" alt="">
        <img src="https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/3.jpg" alt="">
    </div>
</div>

*{
    margin: 0;
    padding: 0;
    border: none;
    /* box-sizing: border-box; */
}

body{
  background-color: white;
}

/* 图片size:480x270 */
img{
  width: 480px;
}

.outer{
  /* 图片宽度为480，放3张，共480x3 = 1440 */
  width: 1440px;  
  height: 270px;
  border: 10px solid blue;
}

.img-container{
  width: 3360px;
  height: 270px;
  outline: 1px solid green;
  display: flex;
}



/* 代码开始 */
.img-container{
  /* 理解这一段很重要。初始0%时，123图占位123，而100%时，123图点位123。就是因为这个原因，才使得carresole可以无缝衔接。 */
  transform: translateX(0);
  transform: translateX(-3360px);
}


@keyframes carresole {
  0% { transform: translateX(0);}
  100% { transform: translateX(-3360px);}
}

.img-container{
  animation: carresole 8s linear infinite;
}

.img-container:hover{
  animation-play-state: paused;
}

.outer{
  overflow: hidden;
}