[分享]css两张图自动轮播

<div class="carousel">
  <img src="image1.jpg">
  <img src="image2.jpg">
</div> 

标签，并给其添加一个class名为"carousel"。在该标签内部，我们使用标签分别插入两张需要轮播的图片，如上述代码所示。

.carousel {
  position: relative;
}

.carousel img:first-child {
  position: absolute;
  left: 0;
  animation-name: slide;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.carousel img:last-child {
  animation-name: fade;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

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

接着，我们在CSS中使用@keyframes定义两种动画，分别是左移和淡入淡出，并设置对应的动画时间、循环次数等参数。在.carousel img:first-child中，我们为第一张图片设置了position: absolute，使其覆盖在第二张图片上方，通过left属性实现向左移动的效果；在.carousel img:last-child中，我们仅设置了淡入淡出动画，使其在第一张图片滑动到最左端时自动淡入，达到两张图片循环轮播的效果。

最后，我们将.carousel的position属性设置为relative，以便其内部元素使用absolute进行定位。CSS两张图自动轮播就完成了！在实现时，还可以调整动画的时间、循环次数等参数，以达到更佳的用户体验。