CSS3是一種用來美化網頁的技術，其中有很多特效令人眼前一亮，如今在網頁制作領域已經被廣泛應用。其中，css3 banner特效更是吸引了眾多設計師的注意。

.banner{
position:relative;
height:500px;
width:100%;
margin:0 auto;
overflow:hidden;
}
.banner img{
position:absolute;
z-index:1;
opacity:1;
animation: imgAnimation 20s infinite;
}
@keyframes imgAnimation{
0%{
opacity:1;
z-index:1;  
}
20%{
opacity:1;
z-index:1;  
}
25%{
opacity:0;
z-index:0;  
}
95%{
opacity:0;
z-index:0;  
}
100%{
opacity:1;
z-index:1;  
}
}

這是一個簡單的CSS3 banner特效的樣例代碼。首先，我們要創建一個容器div，然后將其中的img標簽設置為絕對定位，于是圖片就可以隨意漂浮在div內部了。我們設置了容器的寬度為100%，高度為500px，并將overflow屬性設置為hidden來實現圖片輪播的效果。

在img樣式中，我們設置了圖片的透明度和動畫效果。在keyframes中，我們通過關鍵幀的方式來設置圖片的輪播效果。在第0%和第20%時，圖片都是完全可見，透明度為1；在第25%時，圖片透明度為0并處于最低的z-index層級上，即看不見；在第100%時，圖片重回最高z-index層級，透明度恢復為1，同時動畫無限循環。

在此基礎上，我們可以添加更多的特效，比如鼠標懸停圖片時的動畫效果，或是加入過渡效果等等，讓整個banner更加炫酷，吸引眼球。