CSS3圖片滾動是網頁制作中比較常用的效果之一，它可以使網站頁面更加生動吸引人，提高用戶體驗。下面介紹一下如何用CSS3來實現圖片滾動的效果。

代碼如下：
div{
position: relative; /*設置相對定位*/
}
ul{
position: absolute; /*設置絕對定位*/
top:0; /*置頂*/
width:100%; /*寬度100%*/
height:240px; /*設置高度*/
overflow:hidden; /*隱藏超出部分*/
animation:move 10s infinite linear; /*動畫效果*/
}
/*動畫效果*/
@keyframes move{
from{top:0}
to{top:-480px}/*圖片高度的兩倍*/
}
li{
list-style:none; /*去除列表樣式*/
width:100%; /*寬度100%*/
height:240px; /*高度為每張圖片的高度*/
float:left; /*左浮動排列*/
}
img{
width:100%; /*圖像寬度為100%*/
height:100%;/*圖像高度為100%*/
}

從代碼中可以看出，我們使用了div,left,ul,li,img等元素來實現圖片滾動的效果，其中針對圖片顯示部分的代碼如下：

ul{
position: absolute; /*設置絕對定位*/
top:0; /*置頂*/
width:100%; /*寬度100%*/
height:240px; /*設置高度*/
overflow:hidden; /*隱藏超出部分*/
animation:move 10s infinite linear; /*動畫效果*/
}

通過設置position: absolute，top:0等屬性來將ul定位到頁面頂部，并且使用overflow:hidden屬性將超出部分隱藏，因此只顯示了選定的圖片內容；然后通過animation屬性來設置圖片的滾動速度、方向等屬性。

最后，我們使用img元素來設置圖片的大小等屬性，實現圖片大小自適應，再將圖片以指定速度進行滾動，從而實現CSS3圖片滾動效果。