[分享]css两张图切换效果

在前端开发中，经常会遇到需要实现图片切换效果的需求，比如在轮播图、广告图或产品展示上。本文将介绍一种使用CSS实现两张图切换的方法。首先，我们需要准备两张图片，然后通过HTML代码将它们放在一个容器内...

在前端开发中，经常会遇到需要实现图片切换效果的需求，比如在轮播图、广告图或产品展示上。本文将介绍一种使用CSS实现两张图切换的方法。

首先，我们需要准备两张图片，然后通过HTML代码将它们放在一个容器内。为了方便后续样式的设置，我们可以为容器设置一个class属性。

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
</div> 

接下来，我们可以使用CSS的伪类选择器和动画效果实现图片切换。我们可以使用 :nth-child() 选择器来选取第一张图片，然后使用 animation 属性设置一个动画效果，使图片慢慢消失。同理，我们可以使用 :nth-child(2) 选择器选取第二张图片，并使其逐渐出现。

<style>
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container img:nth-child(1) {
  animation: fade-out 5s forwards;
}

.image-container img:nth-child(2) {
  animation: fade-in 5s forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style> 

最后，我们需要将动画无限循环。为此，我们可以将两个动画同时设置为 infinite。

.image-container img:nth-child(1) {
  animation: fade-out 5s forwards infinite;
}

.image-container img:nth-child(2) {
  animation: fade-in 5s forwards infinite;
} 

现在，我们已经成功实现了两张图片切换的效果。你可以通过修改animation属性、动画持续时间等参数，来实现不同的效果。