CSS無縫跑馬燈是一種常見的網(wǎng)站效果，可以讓文字、圖像或其他內(nèi)容在頁面上連續(xù)滾動(dòng)，增加頁面的視覺效果。下面介紹一種實(shí)現(xiàn)無縫跑馬燈效果的CSS代碼。

html {
scroll-behavior: smooth; /* 讓滾動(dòng)更平滑 */
}
.marquee {
overflow: hidden; /* 隱藏內(nèi)容超出容器的部分 */
white-space: nowrap; /* 強(qiáng)制不換行 */
position: relative; /* 設(shè)置相對定位 */
}
.marquee p {
display: inline-block; /* 使多行文本變成行內(nèi)元素 */
padding-right: 50px; /* 防止文本折行超出容器 */
position: absolute; /* 相對容器定位 */
animation: marquee 15s infinite linear; /* 設(shè)置滾動(dòng)動(dòng)畫 */
}
@keyframes marquee {
0% { left: 100%; } /* 文本從右側(cè)開始，初始位置在容器外 */
100% { left: -100%; } /* 文本從左側(cè)結(jié)束，滾動(dòng)到容器外 */
}

以上代碼中，我們定義了一個(gè).marquee選擇器，它是包含待滾動(dòng)文本的容器。我們把文本塞到一個(gè)p標(biāo)簽里，為了讓多行文本變成行內(nèi)元素，我們設(shè)置其display屬性為inline-block。接著，我們設(shè)置了這個(gè)p標(biāo)簽的動(dòng)畫，其中animation屬性可以控制具體的動(dòng)畫類型，這里我們使用了marquee這個(gè)關(guān)鍵幀動(dòng)畫。關(guān)鍵幀動(dòng)畫指定了不同時(shí)間點(diǎn)的CSS屬性值，瀏覽器會(huì)根據(jù)這些屬性值逐幀渲染頁面以實(shí)現(xiàn)動(dòng)畫效果。我們的關(guān)鍵幀動(dòng)畫中，0%時(shí)p標(biāo)簽的left屬性為100%，即初始位置在容器右側(cè)；而100%時(shí)p標(biāo)簽的left屬性為-100%，即文本已經(jīng)從右側(cè)滾動(dòng)出容器。

整個(gè).marquee容器的overflow屬性被設(shè)置為hidden，這樣就可以隱藏超出容器的內(nèi)容。而white-space屬性則可以控制是否折行，在我們這個(gè)例子中，文本必須強(qiáng)制不折行才能實(shí)現(xiàn)無縫滾動(dòng)的效果。最后，我們再把.marquee容器的position屬性設(shè)為relative，p標(biāo)簽的position屬性設(shè)為absolute即可。

以上代碼可以讓文本無限滾動(dòng)，如果需要在某個(gè)時(shí)間點(diǎn)停止?jié)L動(dòng)，可以在.animation屬性中設(shè)置animation-name和animation-duration屬性，然后使用JavaScript代碼在指定的時(shí)間點(diǎn)清除animation屬性即可。