css js滑动渐变

CSS和JS都是前端开发常用的技术，它们经常被用来实现一些特效和动画效果，其中滑动渐变是一种非常常见的效果。

.slider {
  width: 600px;
  height: 400px;
  position: relative;
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active {
  opacity: 1;
}

上面的CSS代码定义了一个.slider容器和.slide元素，其中.slide元素采用绝对定位并且opacity属性为0，表示它们不可见。当.slide元素的active类被添加时，元素的opacity属性会变为1，这样就实现了渐变效果。

let slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].classList.remove('active');
  slides[n].classList.add('active');
  currentSlide = n;
}

setInterval(function() {
  let nextSlide = (currentSlide + 1) % slides.length;
  showSlide(nextSlide);
}, 5000);

上面的JS代码定义了一个showSlide函数来控制.slide元素的active类的添加和删除，以实现滑动效果。setInterval函数用来定时调用showSlide函数，使得每个.slide元素都能被漂亮地渐变。

通过以上的CSS和JS代码，我们就可以实现一个非常简单而且有效果的滑动渐变。