CSS滾動播放圖片是一種非常流行的網站設計，它可以在頁面上展示多張圖片，讓用戶可以一眼看到網站的主要內容。

.slide-wrap {
height: 400px; /* 設置滾動容器的高度 */
overflow: hidden; /* 隱藏溢出部分的內容 */
position: relative; /* 設置滾動容器的相對位置 */
}
.slide-list {
width: 400%; /* 設置滾動列表的寬度 */
position: absolute; /* 將滾動列表定位到滾動容器的左上角 */
top: 0;
left: 0;
animation: slide 20s linear infinite; /* 使用動畫播放滾動列表 */
}
@keyframes slide {
0% {
left: 0; /* 滾動列表開始的位置 */
}
100% {
left: -300%; /* 滾動列表結束的位置 */
}
}
.slide-item {
float: left; /* 設置滾動項左浮動排列 */
width: 25%; /* 設置滾動項寬度 */
height: 400px; /* 設置滾動項高度 */
}
.slide-item img {
width: 100%; /* 設置圖片寬度為100% */
height: 100%; /* 設置圖片高度為100% */
object-fit: cover; /* 填充滾動項，讓圖片充滿整個容器 */
}

在代碼中可以看到，我們在.slide-wrap里面嵌套了一個.slide-list，這個.slide-list是一個滾動列表，里面包含了多個.slide-item，每個.slide-item都是一個滾動項。我們設置.slide-wrap為相對定位，.slide-list為絕對定位，然后通過左偏移量來實現滾動效果。

同時，我們還需要給每個.slide-item里面的圖片設置寬度和高度，讓它們充滿整個容器。這里我們使用了object-fit屬性，讓圖片填充整個容器，并且保持圖片的比例不發生改變。

通過以上步驟，我們就可以實現一個簡單的CSS滾動播放圖片效果了。