Css Animation for image 相互叠加然后分离

Question

大家好，我想在 html、css 中创建一个动画，其中 3 个图像将相互重叠，那时有一个文本说汽车，然后所有图像将被分开，每个图像底部都有文本说车身、轮胎、发动机任何资源或如何做这种类型的动画

Answer 1

这种类型的动画可以使用 CSS 和 HTML 创建。您可以为每个图像创建一个容器，并使用绝对定位将图像堆叠在一起。然后，您可以使用 CSS 关键帧使图像彼此分开并显示底部的文本。这是一个例子：

.container {
  position: relative;
}

.image-1,
.image-2,
.image-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: move 1s ease-in-out;
  animation-fill-mode: forwards;
}

.image-1 {
  animation-delay: 0.2s;
}

.image-2 {
  animation-delay: 0.4s;
}

.image-3 {
  animation-delay: 0.6s;
}

.car-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  animation: move-text 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 25%;
    left: 50%;
  }
}

@keyframes move-text {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="container">
  <div class="image-1">
    <img src="image-1.png">
    <p class="text">Body</p>
  </div>
  <div class="image-2">
    <img src="image-2.png">
    <p class="text">Tyres</p>
  </div>
  <div class="image-3">
    <img src="image-3.png">
    <p class="text">Engine</p>
  </div>
  <p class="car-text">Car</p>
</div>