制作CSS自動循環滾動輪播圖是網頁設計中常用的基本技能之一。下面我們使用HTML和CSS來制作一個簡單的自動循環滾動輪播圖。

HTML代碼如下：
<div class="slider">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
CSS代碼如下：
.slider {
width: 100%;
height: 300px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
float: left;
}
.slider img:last-child {
display: block;
margin-left: -100%;
}
@keyframes slider {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.slider img {
animation: slider 10s infinite;
}

上述代碼解釋如下：

首先，我們創建了一個名為slider的容器，用于包含輪播的圖像。

接著，我們將slider容器的寬度設置為100%，高度設置為300px，并將其溢出設置為hidden，以確保圖像位于slider容器內。然后，我們將所有圖像的寬度和高度設置為100%（以占滿slider容器），并使用float: left向左浮動它們。

接下來，我們使用:last-child偽類將最后一個圖像顯示在第一張圖像的左側，并通過將其margin-left設置為-100%來隱藏它。

最后，我們使用關鍵幀動畫將slider容器中的所有圖像與translateX()轉換一起移動，以創建動畫效果。在這種情況下，這一動畫將在10秒鐘內重復多次，并向左無限循環滾動所有圖像。

這樣，我們就成功地使用HTML和CSS創建了一個簡單的自動循環滾動輪播圖。