CSS3 是一种基于CSS (层叠样式表) 的新标准，其引入了许多新的功能和特征，帮助开发者实现更吸引人的网页元素。其中之一就是 CSS3 特效 banner，下面我们一起来了解一下。

CSS3 特效 banner 是用 CSS3 技术实现的一个轮播图，能够很好地展示网站的主题或者产品宣传。下面是一个示例：

<div class="wrapper">
<ul class="slider">
<li>
<img src="image1.jpg" alt="">
</li>
<li>
<img src="image2.jpg" alt="">
</li>
<li>
<img src="image3.jpg" alt="">
</li>
</ul>
</div>

首先，我们需要一个父容器并将其设置为定位的相对位置。我们用.wrapperclass 定义一个相对位置的容器。接下来，创建一个无序列表（<ul>）用于保存轮播图片。使用.sliderclass 为该列表添加样式。

.wrapper {
position: relative;
}
.slider {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.slider li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.slider li:first-child {
opacity: 1;
}

在上面的样式中，我们为.slider和每个列表项<li>添加了样式，并使用了CSS3的过渡效果来使轮播图片渐渐地淡入淡出。在.slider li:first-child选择器中，我们设置列表中的第一张图片始终为可见状态。

.slider li { 
display: block; 
height: auto; 
width: 100%;
position: relative; 
}
.slider img {
width: 100%;
height: auto;
}

最后，我们设置每个列表项<li>和其子元素<img>的宽度和高度，并确保相对定位。

组合这些 CSS3 功能，我们就可以轻松创建一个动态的特效 banner，为网站添加一些生动的元素。