CSS向左滾動(dòng)圖是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)效果。

通過(guò)CSS代碼，可以讓圖片或文字向左滾動(dòng)，形成動(dòng)態(tài)的效果。

/* CSS代碼 */
.scroll {
width: 100%;
white-space: nowrap;
overflow: hidden;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

以上代碼是實(shí)現(xiàn)CSS向左滾動(dòng)的核心代碼。

首先，將需要滾動(dòng)的元素的寬度設(shè)置為100%（同它所在的容器寬度相同），并將其內(nèi)部的空白字符截?cái)啵╪owrap），這樣元素中的所有內(nèi)容就會(huì)移到同一行，并不換行。

其次，將元素的溢出部分隱藏起來(lái)（overflow: hidden），這樣就只能看到元素寬度內(nèi)的部分。

接著，使用動(dòng)畫(huà)（animation）的方式讓元素的內(nèi)容向左滾動(dòng)。

關(guān)鍵代碼是用@keyframes定義了一個(gè)名為scroll的動(dòng)畫(huà)效果，規(guī)定了元素從0%（初始位置）到100%（左邊緣位置）的水平偏移，而且是以線性（linear）的方式滾動(dòng)。

最后，將動(dòng)畫(huà)無(wú)限循環(huán)，以實(shí)現(xiàn)比較生動(dòng)的效果。

這種CSS向左滾動(dòng)圖可用于網(wǎng)頁(yè)的導(dǎo)航菜單、文字滾動(dòng)通知等。