CSS中的banner图轮播是我们常见的网页设计之一，它可以在网页中展示多张图片，让网页变得更加生动、有趣，同时还可以提高用户的体验。下面我们就来看看如何使用CSS来轮播banner图。

//HTML代码
<div class="banner">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
//CSS样式
.banner {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.banner img {
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.banner img.active {
opacity: 1;
}

首先，我们需要创建一个容器，并设置它的宽和高。这个容器就是我们的banner区域。

接着，我们需要在这个容器中添加多张图片，使用<img>标签即可。在CSS样式中，我们对这些图片进行定位，设置它们在容器中的位置，并将所有图片的opacity属性设为0，表示它们都是不可见的。

然后，我们通过添加CSS类来控制其中一张图片为可见状态。我们将这个CSS类称为“active”，它会使被标记的图片的opacity属性调整为1，使它呈现出可见状态。

最后，我们需要使用JavaScript来实现轮播功能。我们可以编写一个计时器，定时将.active类从一张图片转移到下一张图片，从而实现轮播效果。

通过以上的步骤，我们就可以使用CSS来实现banner图轮播了！