在網頁設計中，動畫效果可以提升視覺效果和用戶體驗。在CSS3中，提供了多種方式實現動畫效果，其中barner動畫是一種常見的效果。本文將介紹使用CSS3實現barner動畫的方法。

.banner {
width: 100%;
height: 500px;
position: relative;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.8s;
}
.banner img.active {
opacity: 1;
z-index: 1;
}
.banner .dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.banner .dot {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: all 0.3s;
}
.banner .dot.active {
transform: scale(1.5);
background-color: #f00;
}

以上代碼中，.banner是輪播圖容器，.banner img是輪播圖，.dots是輪播圖下面的小圓點，.dot是小圓點樣式。通過CSS3的過渡效果來實現輪播圖的切換和小圓點的變化。設置了圖片的透明度為0，當處于active狀態時透明度為1，同時z-index設置為1，使其在最上方。小圓點通過transform和background-color屬性來變化。

以下是html代碼：

以上HTML代碼中，.banner包含三張圖片和小圓點，第一張圖片默認為active狀態，即顯示在最上方，其他圖片的透明度為0。

通過以上CSS和HTML代碼，就可以實現一個簡單的CSS3 barner動畫效果。可以根據自己的需求進行修改，例如改變輪播時間、輪播方式等。