CSS是現(xiàn)代網(wǎng)站設(shè)計(jì)中的一個(gè)重要技術(shù)，許多網(wǎng)站在美化頁(yè)面的時(shí)候都需要用到CSS。今天我們來(lái)介紹一下如何利用CSS來(lái)實(shí)現(xiàn)圖片滾動(dòng)特效。

/*HTML代碼*/
/*CSS樣式*/
.scrollBox {
width: 400px;
height: 200px;
overflow: hidden;/*隱藏溢出的內(nèi)容*/
}
.scrollList {
position: relative;/*設(shè)置定位為相對(duì)定位*/
left: 0;/*初始位置為0*/
margin: 0;
padding: 0;
width: 1600px;/*所有圖片的總寬度*/
animation: scroll 10s linear infinite;/*設(shè)置動(dòng)畫(huà)*/
}
.scrollList li {
float: left;
list-style: none;
width: 400px;
height: 200px;
}
@keyframes scroll {
0% { left: 0; }
100% { left: -1200px; }/*每張圖片的寬度為400px，總共4張圖片就是1200px*/
}

以上是實(shí)現(xiàn)圖片滾動(dòng)特效的HTML&CSS代碼，這個(gè)例子中我們用到了CSS3的動(dòng)畫(huà)特性。首先我們將要滾動(dòng)的圖片放在一個(gè)有固定寬度和高度的父容器中，并設(shè)置為隱藏溢出內(nèi)容，然后將圖片容器設(shè)置為相對(duì)定位，并將初始位置設(shè)置為0。然后我們將每張圖片都用一個(gè)\