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

html {
scroll-behavior: smooth; /* 讓滾動更平滑 */
}
.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è)置滾動動畫 */
}
@keyframes marquee {
0% { left: 100%; } /* 文本從右側(cè)開始，初始位置在容器外 */
100% { left: -100%; } /* 文本從左側(cè)結(jié)束，滾動到容器外 */
}

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

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

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