CSS 輪播圖是網頁設計中非常實用的功能，通過 CSS 代碼，可以使網站頁面更加美觀和動感。下面是一個簡單的 CSS 輪播圖的 HTML 代碼示例：

<div class="slider">
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>

上述代碼中，使用了一個 div 容器，類名為 slider。在該容器中，使用了一個 ul 列表，這個列表中包含了三個 li 列表項，在每個列表項中分別包含一個 img 標簽，用于顯示圖片。

接下來，需要使用 CSS 樣式來實現輪播效果。下面是一個簡單的 CSS 樣式代碼示例：

.slider {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
}
.slider ul {
position: absolute;
list-style: none;
margin: 0;
padding: 0;
width: 1800px;
height: 400px;
animation: slide 10s infinite linear;
}
.slider li {
float: left;
width: 600px;
height: 400px;
}
@keyframes slide {
0% {
left: 0;
}
100% {
left: -1200px;
}
}

上述代碼中，首先設置了容器的 position 屬性為 relative，overflow 屬性為 hidden，這樣可以保證容器內的元素不會溢出容器。然后設置容器的寬度和高度，分別為 600px 和 400px。

接著，設置 ul 列表的 position 屬性為絕對定位，list-style 屬性為 none，這樣可以去除列表項的圓點符號。然后將列表的寬度設置為 1800px，這樣可以讓所有的列表項排成一行。接下來，通過動畫效果實現輪播圖，使用 animation 屬性，指定 slide 動畫，執行時間為 10s，重復次數為 infinite，線性分布。

最后，設置每個列表項的浮動屬性為 left，寬度和高度與容器相同。設置 @keyframes 屬性，指定 slide 動畫的兩個關鍵幀，分別是 0% 和 100%。在 0% 的關鍵幀中，將 ul 列表的 left 屬性設置為 0；在 100% 的關鍵幀中，將 ul 列表的 left 屬性設置為 -1200px，這樣就可以實現輪播的效果了。