在網頁設計中，使用CSS圖片來回循環滾動是一種常見的技術。通過這種技術，可以使網站頁面看起來更加生動、有趣、動態。在今天的文章中，我們將學習如何使用CSS圖片來回循環滾動的方法。

/* 定義一個動畫 */
@keyframes roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200px);
}
}
/* 定義圖片的樣式 */
img {
width: 200px;
height: 200px;
animation: roll 2s linear infinite;
}

首先，我們需要定義一個動畫。這個動畫叫做 "roll"，并定義了物品從原始位置開始向左移動200px的效果。我們通過關鍵幀來定義動畫的狀態，0%表示在動畫的開始，圖片在原來的位置，100%表示動畫結束，圖片向左移動200px。

接下來，我們就需要將這個動畫應用到我們的圖片上了。我們使用CSS樣式來定義圖片的寬度和高度。我們使用 "animation" 屬性來將之前定義的動畫應用到圖片上。我們使用 "2s" 來表示動畫的時間長度，并使用 "linear" 來表示動畫執行的速度。我們使用 "infinite" 來表示動畫應該無限循環。

最后，我們可以通過將圖片嵌入到頁面中來查看動畫的效果。如下代碼所示：

<img src="example.png" alt="example">

這樣，我們就成功地將CSS圖片來回循環滾動了。這種技術的應用非常廣泛，可以用于裝飾網站，增加趣味性，也可以用于展示產品等。我們只需要改變CSS中圖片的樣式和動畫的參數，就可以輕松地獲得不同的動畫效果。