[分享]css两张图片交替出现

在网页设计中，有时需要让两张图片交替出现。这可以通过CSS实现。下面我们将介绍一个简单的CSS实现方法。

 /* CSS代码 */
  .img-container {
    position: relative;
    width: 300px;
    height: 300px;
  }

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

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

  .img-container:hover img {
    opacity: 0;
  }

  .img-container:hover img:first-child {
    opacity: 0;
  }

  .img-container:hover img:last-child {
    opacity: 1;
  } 

以上CSS代码中，.img-container是两张图片的父容器，width和height指定容器的宽度和高度，position: relative用于定位子元素。.img-container img定义了图片，使用position: absolute定位。opacity为0时表示透明，图片不可见。transition指定动画过渡效果，0.5s表示动画时长，ease-in-out表示速度变化。

.img-container img:first-child设置第一张图片，opacity为1表示不透明，第一张图片默认显示。.img-container:hover img表示当鼠标移到.img-container上时，所有图片的opacity变为0，即所有图片都透明。.img-container:hover img:first-child表示第一张图片的opacity变为0，即第一张图片变透明，.img-container:hover img:last-child表示最后一张图片的opacity变为1，即最后一张图片变不透明，实现图片交替效果。

通过以上CSS代码，即可实现两张图片交替出现的效果。这种方法简单易懂，适合初学者使用。