[分享]css两个图片自动变换

在网页中，我们经常需要使用图片来展示内容。在一些特定的场景中，我们需要让两张图片自动进行切换展示。这个功能可以通过CSS来实现。img { : absolute; top: 0; left: 0; a...

在网页中，我们经常需要使用图片来展示内容。在一些特定的场景中，我们需要让两张图片自动进行切换展示。这个功能可以通过CSS来实现。

img {
  position: absolute;
  top: 0;
  left: 0;
  animation: fade 5s infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 

在上面的代码中，我们定义了一个名为“fade”的动画。该动画通过改变图片的不透明度实现图片的切换。我们使用了CSS动画的“infinite”属性，让两张图片无限循环播放切换。

此外，我们给图片设置了“position: absolute”、“top: 0”和“left: 0”属性，让两张图片始终重叠在一起。这样，在动画切换时，我们才能看到两张图片的过渡效果。

<img src="img-1.jpg">
<img src="img-2.jpg">

最后，将上述代码添加到HTML文件中，设置两个图片的src属性，就可以看到两张图片在自动切换了。

总结来说，使用CSS动画可以实现两张图片的自动切换，让网页展示更加动态和生动。