[分享]css中怎么实现轮播图

CSS中实现轮播图有多种方式，以下是其中常用的两种方法：

方法一：使用animation和keyframes实现轮播图动画

.slider {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: slide 4s infinite;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-100%);
  }
  75% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
} 

以上代码实现了一个轮播图，通过animation和keyframes属性设置图片切换的动画。其中.slider为容器，包含一组绝对定位的img元素，通过animation属性设置图片轮播的时间和无限循环。通过keyframes属性定义了从0%到100%的动画过程，实现图片的滑动效果。

方法二：使用transform和transition实现轮播图动画

.slider {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1s, opacity 1s;
}

.slider img:first-child {
  opacity: 1;
  transform: translateX(0);
}

.slider img.show {
  opacity: 1;
  transform: translateX(0);
}

.slider img.hide {
  opacity: 0;
  transform: translateX(100%);
} 

以上代码同样实现了一个轮播图，通过transform和transition属性设置了图片的滑动和淡入淡出效果。其中默认显示第一张图片，其他图片的opacity和transform设置成0。当切换到下一张图片时，将当前图片添加类名show，下一张图片添加类名hide，通过addClass()和removeClass()方法实现类名的添加和移除，同时利用CSS设置transform和opacity的动画效果，实现图片的切换效果。