HTML滾動圖片是網頁設計中比較常見的組件，它能夠讓網站頁面更加動態有趣。今天我們就來學習一下如何使用CSS編寫HTML滾動圖片的代碼。 首先，我們需要在HTML中創建一個外層容器，然后在容器中加入多個相同的圖片。其中，圖片的數量需要根據實際情況來定，一般建議兩張以上。 接下來，我們需要使用CSS來設置容器的樣式和圖片的滾動效果，代碼如下：

<style>
.scroll-container {
overflow: hidden; /* 隱藏多余的圖片 */
position: relative; /* 設置容器為相對定位 */
}
.scroll-container img {
position: absolute; /* 設置圖片為絕對定位 */
animation: scroll 10s infinite; /* 滾動動畫，時間為10秒 */
}
@keyframes scroll {
0% { top: 0px; } /* 圖片初始位置為0px */
100% { top: -600px; } /* 圖片滾動距離為600px */
}
</style>

以上代碼中，我們創建了一個名為scroll-container的類來設置容器的樣式，包括設置容器為相對定位，并隱藏多余的圖片。然后，在圖片上使用了position屬性將其設置為絕對定位，并使用animation屬性和@keyframes關鍵字來創建圖片滾動的動畫效果。在CSS的@keyframes中，我們設置了圖片初始位置和最終位置，讓圖片從0px滾動到-600px的位置。 最后，我們在HTML中使用這些CSS代碼，將圖片放入scroll-container容器中即可。代碼如下：

<div class="scroll-container">
<img src="img1.jpg" alt="圖片1">
<img src="img2.jpg" alt="圖片2">
<img src="img3.jpg" alt="圖片3">
</div>

以上代碼中，我們將三張圖片放入一個名為scroll-container的div容器中，從而實現了滾動圖片的效果。 綜上所述，通過上述CSS代碼和HTML代碼的結合，我們可以輕松地實現滾動圖片效果，提升網頁的動態性和吸引力。