CSS多張圖片疊加怎么寫過渡

在CSS中，我們可以通過使用相對定位（relative positioning）和***定位（absolute positioning）來實現(xiàn)多張圖片的疊加，并利用過渡（transition）來平滑地展示這些圖片，以下是一個簡單的示例代碼：

HTML結(jié)構(gòu)：

<div class="image-stack">
  <img class="image-1" src="image1.jpg" alt="Image 1">
  <img class="image-2" src="image2.jpg" alt="Image 2">
  <img class="image-3" src="image3.jpg" alt="Image 3">
  <img class="image-4" src="image4.jpg" alt="Image 4">
  <img class="image-5" src="image5.jpg" alt="Image 5">
  <img class="image-6" src="image6.jpg" alt="Image 6">
  <img class="image-7" src="image7.jpg" alt="Image 7">
  <img class="image-8" src="image8.jpg" alt="Image 8">
  <img class="image-9" src="image9.jpg" alt="Image 9">
  <img class="image-10" src="image10.jpg" alt="Image 10">
</div>

CSS樣式：

.image-stack {
  position: relative;
  width: 300px;
  height: 300px;
}
.image-1, .image-2, .image-3, .image-4, .image-5, .image-6, .image-7, .image-8, .image-9, .image-10 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1s;
}
.image-2 {
  z-index: -1;
}
.image-3 {
  z-index: -2;
}
.image-4 {
  z-index: -3;
}
.image-5 {
  z-index: -4;
}
.image-6 {
  z-index: -5;
}
.image-7 {
  z-index: -6;
}
.image-8 {
  z-index: -7;
}
.image-9 {
  z-index: -8;
}
.image-10 {
  z-index: -9;
}

在這個示例中，我們使用了相對定位和***定位來疊加圖片，并通過設置不同的z-index來調(diào)整圖片的層次關(guān)系，我們還使用了過渡來平滑地展示圖片，你可以根據(jù)自己的需求來調(diào)整圖片的數(shù)量和順序。