html - 如何实现缩小到另一个图像过渡效果

Question

我希望将图像缩小到第二张图像、第三张图像，依此类推。我尝试通过背景图像和比例使用一些关键帧自己制作它，它运行得很好，除了有两个问题。 1.我的文字和按钮也被缩放了，2.图片的持续时间太短了。我会包括它，但我已经删除了它，因为它不是我想要的。不确定是否有一种方法可以使用纯 CSS 来实现，至少不容易。所以我倾向于我将不得不使用 JS？这是我当前的代码。

.jumbo {
  display: flex;
  flex-direction: column;
  justify-content: Center;
  margin: 0;
  width: 100vw;
  height: 100vh;
  min-height:100vh;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
    url("images/j-img1.png");
  background-repeat:no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
  text-align: center;
  color: white;
  font-weight: 600;
}

/* Jumbo button */
.vmore-button {
  text-align: center;
  border: 2px solid white;
  text-transform: uppercase;
  padding: 16px;
  align-self: Center;
  margin: 20px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 24px;
  transition: 0.5s ease;
  color: white;
  max-height: 70px;
  cursor:pointer;
}

    <div class="jumbo">
      <h2 class="jumbo-text">
        Welcome to LLG
      </h2>
      <h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
        Memorable Gaming Experience, High Quality Servers.
      </h3>
      <a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
    </div>

Answer 1

您将需要一个容器 div 和两个子分隔符。第一个 child 应该处理图像缩放/转换，第二个 child 应该包含您的文本。图像和文本分隔符都应绝对定位，以便它们彼此重叠。您可以通过将特定类应用于父容器来更改哪些跨度/图像是事件的/可见的。

<div class="container">
  <div class="images">
    <img>
    <img>
    <img>
  </div>
  <div class="text">
    <span>TextA</span>
    <span>TextB</span>
    <span>TextC</span>
  </div>
</div>