CSS中有一種很常用的交互效果——鼠標(biāo)經(jīng)過(guò)圖片滾動(dòng)。這種效果給網(wǎng)頁(yè)帶來(lái)了一種動(dòng)感，增加了用戶的體驗(yàn)感。下面是CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片滾動(dòng)的示例：

/* 設(shè)置圖片列表的樣式 */
.pic-list{
overflow: hidden;
white-space: nowrap;
}
/* 設(shè)置每張圖片的樣式 */
.pic-item{
display: inline-block;
}
/* 鼠標(biāo)經(jīng)過(guò)圖片的樣式 */
.pic-item:hover{
transform: scale(1.2);
transition: all .3s ease-in-out;
}
/* 圖片之間的間距 */
.pic-item:not(:first-child){
margin-left: 20px;
}

上面的代碼設(shè)置了一個(gè)圖片列表，每張圖片使用.pic-item類來(lái)表示，并且使用display: inline-block;使圖片可以橫向排列，margin-left: 20px;設(shè)置圖片之間的間距。

當(dāng)鼠標(biāo)經(jīng)過(guò)圖片時(shí)，使用.pic-item:hover類設(shè)置了一個(gè)動(dòng)畫效果，使圖片縮放到原來(lái)的1.2倍，并且使用transition: all .3s ease-in-out;讓這個(gè)動(dòng)畫效果更加平滑。

最后，將整個(gè)圖片列表放在一個(gè)容器中，并將容器設(shè)置為position: relative;，便于后續(xù)調(diào)整界面布局，如下所示：

/* 容器樣式 */
.pic-container{
position: relative;
width: 100%;
height: 300px;
}
/* 圖片列表樣式 */
.pic-list{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼將容器設(shè)置為一定高度，使用position: relative;將容器設(shè)為相對(duì)定位，然后在圖片列表中使用position: absolute;將其設(shè)為絕對(duì)定位，并將列表居中，使用transform: translate(-50%, -50%);移動(dòng)列表。

這樣就可以輕松實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片滾動(dòng)的效果了。