css两张图自动轮播

发表于前端技术学习版块 css,教程

CSS两张图自动轮播是一种常见的网页效果，它能够让网站更加生动有趣，吸引用户的注意力。下面我们来介绍如何通过CSS实现两张图片的自动轮播。<div class= carousel &am

CSS两张图自动轮播是一种常见的网页效果，它能够让网站更加生动有趣，吸引用户的注意力。下面我们来介绍如何通过CSS实现两张图片的自动轮播。

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

首先，我们需要在HTML中定义一个

标签，并给其添加一个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两张图自动轮播就完成了！在实现时，还可以调整动画的时间、循环次数等参数，以达到更佳的用户体验。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。