如何用CSS制作简易轮播图_CSS动画与布局结合实现

<div class="carousel">
  <ul class="carousel-list">
    <li class="carousel-item"><img src="image1.jpg" alt="图1"></li>
    <li class="carousel-item"><img src="image2.jpg" alt="图2"></li>
    <li class="carousel-item"><img src="image3.jpg" alt="图3"></li>
  </ul>
</div>

.carousel {
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: 50px auto;
  border: 2px solid #ddd;
  position: relative;
}
<p>.carousel-list {
display: flex;
width: 300%; /<em> 三张图总宽度 </em>/
list-style: none;
padding: 0;
margin: 0;
}</p><p>.carousel-item {
width: 33.333%;
height: 400px;
}</p><p>.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33.33% { transform: translateX(0); }
<p>33.34% { transform: translateX(-100%); }
66.66% { transform: translateX(-100%); }</p><p>66.67% { transform: translateX(-200%); }
100% { transform: translateX(-200%); }
}</p><p>.carousel-list {
animation: slide 6s infinite ease-in-out;
}

.carousel:hover .carousel-list {
  animation-play-state: paused;
}