CSS实现响应式轮播图教程

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 60vw;
  max-height: 500px;
}
.carousel figure {
margin: 0;
float: left;
width: 25%; / 四张图均分 /
}
.carousel figure img {
width: 100%;
height: 100%;
object-fit: cover;
}

@keyframes slide {
  0% { transform: translateX(0); }
  12.5% { transform: translateX(0); }
  25% { transform: translateX(-25%); }
  37.5% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  62.5% { transform: translateX(-50%); }
  75% { transform: translateX(-75%); }
  87.5% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}
.carousel {
animation: slide 12s infinite;
}

@media (max-width: 768px) {
  .carousel figure {
    width: 100%;
  }
@keyframes slide-mobile {
0% { transform: translateX(0); }
16% { transform: translateX(0); }
25% { transform: translateX(-100%); }
41% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
66% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
91% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}
.carousel {
animation: slide-mobile 16s infinite;
}
}