CSS中滾動圖片的效果給網(wǎng)站增添了動態(tài)的元素，增強了視覺效果。下面是一個CSS中滾動圖片的代碼實例：

.slides-container {
width: 100%;
height: 300px;
overflow: hidden;
}
.slides {
display: flex;
width: 500%;
height: 300px;
animation: slide 10s infinite;
}
.slides img {
width: 20%;
height: 300px;
}
@keyframes slide {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-20%);
}
45% {
transform: translateX(-20%);
}
50% {
transform: translateX(-40%);
}
70% {
transform: translateX(-40%);
}
75% {
transform: translateX(-60%);
}
95% {
transform: translateX(-60%);
}
100% {
transform: translateX(0);
}
}

上面的代碼實現(xiàn)了一個圖片輪播的效果。slides-container類是存放圖片輪播的容器，設(shè)置了寬度和高度，并將超出容器范圍的內(nèi)容隱藏。slides類是存放輪播圖片的容器，使用了flex布局，并將容器寬度設(shè)置為5倍圖片寬度，從而使得輪播動畫可以順利進(jìn)行。在slides img中設(shè)置了圖片寬度和高度。接下來使用了動畫@keyframes slide實現(xiàn)了圖片滾動動畫。其中，transform: translateX(x%)代表元素沿X軸方向的移動距離。通過設(shè)置不同的移動距離，可以實現(xiàn)圖片的不斷滾動和切換。