CSS圖片滾動(dòng)是網(wǎng)頁(yè)設(shè)計(jì)中常用的一種效果，可以讓圖片循環(huán)滾動(dòng)展示，讓網(wǎng)頁(yè)更加生動(dòng)。下面介紹一種CSS實(shí)現(xiàn)圖片滾動(dòng)的方法。 首先，在HTML中按照如下格式添加圖片：

<div class="slider"> 
<img src="image1.jpg" alt="image1"> 
<img src="image2.jpg" alt="image2"> 
<img src="image3.jpg" alt="image3"> 
</div>

這里使用一個(gè)class名為slider的div來(lái)包含圖片。然后在CSS中添加如下樣式：

.slider{
width: 500px; 
height: 300px; 
overflow: hidden; 
}
.slider img{ 
width: 500px; 
height: 300px; 
float: left; 
} 
@keyframes slider{ 
0% { margin-left: 0; } 
20% { margin-left: 0; } 
25% { margin-left: -500px; } 
45% { margin-left: -500px; } 
50% { margin-left: -1000px; } 
70% { margin-left: -1000px; } 
75% { margin-left: -1500px; } 
95% { margin-left: -1500px; } 
100% { margin-left: 0px; } 
} 
.slider img { 
animation: slider 15s infinite; 
}

其中，div的寬度和高度要和圖片大小相同，overflow屬性設(shè)置為hidden，表示隱藏溢出部分的內(nèi)容。每個(gè)圖片的寬度設(shè)置為500px，高度設(shè)置為300px，使用float:left將圖片橫向排列。 最后，通過(guò)keyframes添加動(dòng)畫(huà)效果，實(shí)現(xiàn)圖片滾動(dòng)，每個(gè)圖片保持15秒的時(shí)間，無(wú)限循環(huán)展示。運(yùn)行頁(yè)面，就可以看到圖片滑動(dòng)的效果了。 總之，這種CSS實(shí)現(xiàn)圖片滾動(dòng)的方法比較簡(jiǎn)單，代碼量也不多，可以用于網(wǎng)站的輪播圖效果中。