CSS自動旋轉效果圖就是網頁元素在不經過用戶輸入的情況下，自動旋轉起來的一種特效。我們通常可以將其應用于產品展示、廣告宣傳、藝術作品展示等頁面中，來給用戶帶來更好的視覺體驗。

.ani-box {
/* 定義旋轉關鍵幀 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 設置元素的動畫效果 */
animation: rotate 5s linear infinite;
}

上面的代碼中，我們首先定義了一個@keyframes關鍵幀，其中定義了從0度到360度的旋轉動畫，并命名為rotate。

我們接著在.ani-box選擇器中進行了動畫的設置。通過animation屬性，我們將關鍵幀rotate設置為動畫效果。5s表示動畫的總時間為5秒，linear表示動畫的變化速度線性變化，infinite表示動畫無限循環。

最后，我們將上述的CSS代碼應用于頁面的HTML元素中即可，例如：

<div class="ani-box">
</div>

上述代碼意思是，將一張產品展示的圖片應用于具有ani-box類名的HTML元素中，并展示自動旋轉的效果。

使用CSS自動旋轉效果圖，可以使網頁更加生動有趣，增強用戶的參與度和滿意度。