用html在三张照片上做一样的转场动画

可以使用 CSS3 的 transition 属性来实现图片的转场动画效果。以下是一个简单的示例代码，实现三张图片的淡入淡出效果：

HTML 代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 代码：

.image-container {
  position: relative;
  width: 600px;
  height: 400px;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.image-container img:first-child {
  opacity: 1;
}

.image-container img.active {
  opacity: 1;
}

.image-container img.previous {
  opacity: 0;
}

JavaScript 代码：

let images = document.querySelectorAll('.image-container img');
let currentImage = 0;

setInterval(() => {
  images[currentImage].classList.remove('active');
  images[currentImage].classList.add('previous');
  currentImage = (currentImage + 1) % images.length;
  images[currentImage].classList.add('active');
  setTimeout(() => {
    images[currentImage].classList.remove('previous');
  }, 1000);
}, 5000);

注解：

1. `.image-container` 类设置了容器的宽度和高度，并且设置为相对定位。

2. `.image-container img` 类设置了图片的绝对定位，位置为容器的左上角。同时，初始时将图片的不透明度设置为 0，以便后续可以通过添加 `active` 类来实现淡入效果。

3. `transition` 属性设置了图片的不透明度变化时长为 1 秒，并且使用了 ease-in-out 缓动函数，以实现流畅的动画效果。

4. JavaScript 代码使用 `setInterval` 方法实现每隔 5 秒切换一张图片的效果。每次切换时，将当前图片的 `active` 类移除，并添加 `previous` 类，以淡出当前图片。然后将下一张图片的 `active` 类添加上，以淡入下一张图片。最后，使用 `setTimeout` 方法延迟 1 秒，将上一张图片的 `previous` 类移除，以便下次切换时可以重新使用。