css主动轮播图 |css之间线

// HTML代码
<div class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
// CSS代码
.slider {
width: 300px;
height: 150px;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.slide.active {
opacity: 1;
}
// JavaScript代码
let slides = document.querySelectorAll('.slide');
let i = 0;
setInterval(function() {
slides[i].classList.remove('active');
i = (i + 1) % slides.length;
slides[i].classList.add('active');
}, 2000);

在HTML代码中，大家先创建了一个包含四个空白div元素的.slider元素，这里没有添加任何内容是因为轮播图的实现是通过CSS的position属性实现的。在CSS代码中，大家设置了.slider元素的宽度、高度以及overflow属性来隐藏溢出的内容。这里的.slide元素是轮播图的基础元素，大家设置了该元素的position为absolute，opacity为0，并通过transition属性让图片的切换更加自然。在JavaScript代码中，大家通过setInterval方法来执行轮播图的切换，每2秒钟切换一张图片，将前一张图片的.opacity设置为0，将下一张图片的.opacity设置为1。

以上就是一个基本的CSS主动轮播图实现方法，如果您需要更多的定制化功能，可以在CSS和JavaScript代码中添加更多的功能实现。