如何在 CSS 中删除卡片并用另一张卡片替换？

Question

我的问题是“如何在 CSS 中用另一张卡片替换一张卡片或用另一张图像替换一张图像？”

这是我的代码：

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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fffbd3;
}

.card {
  position: relative;
  width: 500px;
  height: 350px;
  transform-style: preserve-3d;
}

.card:before {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}


/* .card:after {
    width: 100%;
    height: 50%;
    background: url('image1.jpg');
    object-fit: cover;
} */

.card div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3%;
  transform-style: preserve-3d;
  overflow: hidden;
  animation: animate 5s ease-out infinite;
  animation-delay: calc(1.6s * var(--i));
}

@keyframes animate {
  0% {}
  25% {
    transform: perspective(300px) translate3d(-150px, 0px, 50px);
    opacity: 2;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  }
  40% {
    transform: perspective(300px) translate3d(-150px, 0px, 50px);
    opacity: 2;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  }
}

.card div span img {
  width: 100%;
  height: 100%;
}

<div class="card">
  <div style="--i:1;">
    <span><img src="image1.jpg" alt="Image 1"></span>
  </div>
  <div style="--i:2;">
    <span><img src="image2.jpg" alt="Image 2"></span>
  </div>
  <div style="--i:3;">
    <span><img src="image3.jpg" alt="Image 3"></span>
  </div>
</div>

这里的问题是在动画的开头，“image3.jpg”显示为缩略图，而不是“image1.jpg”。我该如何解决？

Answer 1

尝试添加“z-index: 500;”第一个 div 的风格：

<div style="--i:1; z-index: 500;">
   <span><img src="image1.jpg" alt="Image 1"></span>
</div>

如果添加更多类型的动画，可能会产生问题