有時(shí)候，網(wǎng)頁設(shè)計(jì)需要讓一段文字左右滾動顯示。這種效果可以通過CSS很容易地實(shí)現(xiàn)。

.marquee {
white-space: nowrap; /*讓文本不自動換行*/
overflow: hidden; /*隱藏溢出的文本*/
position: relative; /*相對定位*/
}
.marquee p {
display: inline-block; /*讓文本顯示為行內(nèi)塊元素*/
position: absolute; /*絕對定位*/
animation: marquee 15s linear infinite; /*設(shè)置滾動動畫*/
}
@keyframes marquee {
0% {left: 100%;} /*文本從右側(cè)進(jìn)入*/
100% {left: -100%;} /*文本從左側(cè)出去*/
}

上面的代碼定義了一個 CSS 類 .marquee，包含一個內(nèi)部的 <p> 元素。通過設(shè)置 white-space 屬性為 nowrap，文本不會自動換行。然后，通過設(shè)置 overflow 屬性為 hidden，隱藏溢出文本。

緊接著，使用相對定位的 .marquee 類，讓內(nèi)部的 <p> 元素設(shè)置為絕對定位，方便進(jìn)行文本滾動。

最后，使用 CSS 動畫功能，通過 keyframes 定義滾動動畫。在 <p> 元素上設(shè)置 animation 屬性，將定義好的 marquee 動畫應(yīng)用于文本。

這段 CSS 代碼可以幫助您快速、有效地實(shí)現(xiàn)文本左右滾動效果，提高網(wǎng)頁的視覺效果，讓頁面更加生動。