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，為網站添加一些生動的元素。