CSS中圖片滾動效果是網頁設計中常用的一種效果，它可以使頁面更加生動、活潑、美觀。使用CSS實現圖片滾動效果，可以避免使用JavaScript等腳本語言，更為簡單和方便。

HTML結構：
<div class="banner">
<ul class="banner-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
CSS樣式：
.banner{
width: 100%; /* 圖片展示區域的寬度，可以根據實際情況自行設置 */
height: 400px; /* 圖片展示區域的高度，可以根據實際情況自行設置 */
overflow: hidden; /* 隱藏超出區域的內容，保證只顯示一張圖片 */
position: relative; /* 相對定位，用于圖片的絕對定位 */
}
.banner-list{
width: 300%; /* 設置圖像區域的寬度三倍，用于放置三張圖片 */
margin: 0; /* 去掉默認邊距 */
padding: 0; /* 去掉默認內邊距 */
position: absolute; /* 絕對定位 */
left: 0; /* 初始位置為0 */
animation: bannermove 10s linear infinite; /* 設置動畫時間、播放方式和無限循環 */
}
.banner-list li{
float: left; /* 元素浮動，使圖片從左到右展示 */
width: 33.33%; /* 列表項的寬度為總體寬度的三分之一 */
list-style-type: none; /* 去掉列表項的標識符 */
}
@keyframes bannermove{
0%{left: 0;} /* 初始場景，圖片的左邊緣位置為0 */
100%{left: -200%;} /* 結束場景，圖片向左移動200%的寬度 */
}

上述代碼使用CSS實現了頁面的圖片滾動效果，其中HTML部分包含一個class為“banner”的div，該div內部包括一個class為“banner-list”的ul，ul內部包含三個li標簽，每個li標簽內部包含一張需要滾動的圖片。

CSS部分中首先對class為“banner”的div設置了寬度、高度、位置等屬性，以及“overflow：hidden”設置隱藏的超過區域部分。接著對class為“banner-list”的ul標簽設置寬度、絕對定位、初始位置和動畫，其中動畫使用“@keyframe”設置開始和結束時的狀態，實現圖片的滾動效果。最后，對“banner-list li”設置浮動、寬度和列表項的標識符。

以上就是一種使用CSS實現圖片滾動效果的方法，可以應用于各種類型的網站設計中，使網頁更加生動、美觀。