h5+css图片卡片式轮播,轮播时看到下一张图片

您可以使用CSS3动画和transform属性来实现卡片式轮播。以下是一个基本的示例代码：

HTML部分：

<div class="slider">
  <div class="slide">
    <img src="image1.jpg">
  </div>
  <div class="slide">
    <img src="image2.jpg">
  </div>
  <div class="slide">
    <img src="image3.jpg">
  </div>
  <div class="slide">
    <img src="image4.jpg">
  </div>
</div>

CSS部分：

.slider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  animation: slide 5s ease-in-out infinite;
}
.slide:nth-child(1) {
  animation-delay: 0s;
}
.slide:nth-child(2) {
  animation-delay: 1s;
}
.slide:nth-child(3) {
  animation-delay: 2s;
}
.slide:nth-child(4) {
  animation-delay: 3s;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  5% {
    opacity: 1;
    transform: translateX(0%);
  }
  90% {
    opacity: 1;
    transform: translateX(0%);
  }
  95% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

该示例使用CSS3动画来实现图片的滑动效果，并且使用transform属性来控制图片的位置。每张图片都是一个.slide元素，并且使用nth-child()选择器来控制动画延迟时间，实现轮播效果。同时，使用object-fit属性来控制图片的填充方式，保持图片的纵横比。