CSS 圖片不間斷滾動(dòng)是一個(gè)很常見(jiàn)的 Web 設(shè)計(jì)特效，它可以讓圖片或文字不停地橫向或縱向滾動(dòng)。這種特效常用于網(wǎng)站的橫幅廣告、新聞滾動(dòng)條等，可以讓網(wǎng)站更加生動(dòng)有趣。

下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)圖片不間斷滾動(dòng)的 CSS 代碼示例：

.scroll {
white-space: nowrap; /* 讓所有圖片在一行內(nèi)，不換行 */
overflow: hidden; /* 隱藏圖片溢出部分 */
}
.scroll img {
display: inline-block; /* 將每張圖片變?yōu)樾袃?nèi)塊元素，可以設(shè)置寬高 */
height: 50px; /* 設(shè)置圖片高度 */
margin-right: 20px; /* 圖片間距 */
animation: scroll 5s linear infinite; /* 使用動(dòng)畫(huà)實(shí)現(xiàn)圖片滾動(dòng) */
}
@keyframes scroll {
0% { transform: translateX(0); } /* 初始位置為左邊界 */
100% { transform: translateX(-100%); } /* 移動(dòng)距離為圖片寬度加上間距 */
}

上面的代碼中，使用了關(guān)鍵字white-space和overflow來(lái)控制圖片的顯示，然后使用display將圖片變?yōu)樾袃?nèi)塊元素，設(shè)置了高度和間距。最后通過(guò)animation屬性實(shí)現(xiàn)了圖片的滾動(dòng)，其中使用了translateX()函數(shù)控制每張圖片的位置。

需要注意的是，如果要實(shí)現(xiàn)多張圖片的滾動(dòng)，要將所有圖片放在一個(gè)容器元素中，并將容器元素設(shè)置為滾動(dòng)區(qū)域。

這是一個(gè)簡(jiǎn)單的例子，開(kāi)發(fā)者可以根據(jù)自己的需求進(jìn)行修改和擴(kuò)展。同時(shí)，使用 CSS 實(shí)現(xiàn)圖片不間斷滾動(dòng)不僅可以提升 Web 頁(yè)面的交互體驗(yàn)，還有助于優(yōu)化頁(yè)面加載速度和減少對(duì) JavaScript 的依賴。