CSS3 Banner素材是網頁制作中經常使用的元素，它可以提升網站的美觀程度和用戶體驗。以下是一些常用的CSS3 Banner素材：

.banner {
width: 100%;
height: 500px;
background: url(images/banner.jpg) no-repeat center center;
background-size: cover;
}

這是最簡單的Banner效果，使用背景圖片實現。其中，background-size: cover可以讓圖片自動適應盒子大小。

.banner {
width: 100%;
height: 500px;
position: relative;
}
.banner img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}

這種方式是使用img標簽實現Banner，可以在img標簽中添加alt屬性來提升SEO效果。其中，position: absolute可以讓img標簽居中，并且max-width和max-height可以讓圖片自適應Banner大小。

.banner {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.banner img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s ease-in-out;
}
.banner img:first-child {
opacity: 1;
z-index: 1;
}
.banner img:nth-child(2) {
z-index: 2;
}
.banner img:nth-child(3) {
z-index: 3;
}
.banner img:nth-child(4) {
z-index: 4;
}
.banner img.active {
opacity: 1;
}

這是使用CSS3實現的輪播Banner，可以將多張圖片輪流展示。其中，使用opacity屬性實現圖片的淡入淡出效果，并且注意要添加CSS3 transition屬性來實現動畫。另外，使用position: relative和z-index屬性來控制圖片的層級。

以上是常用的CSS3 Banner素材，可以根據具體需求進行選擇和修改，實現不同的效果。