在網(wǎng)頁設(shè)計與開發(fā)領(lǐng)域，跑馬燈效果常常被用于展示重要信息或吸引用戶注意力。通過純 CSS 實現(xiàn)橫向跑馬燈，不僅能夠提升頁面的動態(tài)效果，還能避免引入過多 JavaScript 代碼，從而提高頁面的加載速度和性能。本文將詳細(xì)介紹如何使用純 CSS 打造一個具有無縫滾動輪播效果且支持移入懸停功能的橫向跑馬燈組件。

　　一、HTML 結(jié)構(gòu)搭建

　　首先，構(gòu)建跑馬燈的基本 HTML 結(jié)構(gòu)。我們使用一個容器元素包裹住需要滾動的內(nèi)容元素。例如：

　　html

　　<p>這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。</p>

　　在上述結(jié)構(gòu)中，.marquee-container 作為外層容器，用于限定跑馬燈的范圍并設(shè)置相關(guān)樣式。.marquee-content 則是實際包含滾動內(nèi)容的內(nèi)部容器，這里放置了一段示例文本，實際應(yīng)用中可以是圖片、鏈接等各種元素的組合。

　　二、CSS 樣式設(shè)置

　　1. 容器樣式

　　為 .marquee-container 設(shè)置基本樣式，包括寬度、高度、溢出隱藏等屬性，以確保跑馬燈區(qū)域的顯示效果：

　　css

　　.marquee-container {

　　width: 100%;

　　height: 50px; /* 根據(jù)需求調(diào)整高度 */

　　overflow: hidden;

　　position: relative;

　　}

　　2. 內(nèi)容樣式

　　對 .marquee-content 進行樣式設(shè)置，使其內(nèi)部文本水平排列，并設(shè)置初始位置：

　　css

　　.marquee-content {

　　white-space: nowrap;

　　position: absolute;

　　left: 0;

　　top: 0;

　　display: flex;

　　align-items: center;

　　}

　　這里的 white-space: nowrap 保證文本不換行，position: absolute 結(jié)合 left: 0 和 top: 0 確定其初始左上角位置，display: flex 和 align-items: center 用于垂直居中內(nèi)容。

　　3. 動畫關(guān)鍵幀定義

　　使用 CSS 動畫來實現(xiàn)跑馬燈的滾動效果，通過 @keyframes 規(guī)則定義動畫關(guān)鍵幀：

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -100%; /* 根據(jù)內(nèi)容長度調(diào)整移動距離 */

　　}

　　}

　　在這個動畫中，從 0% 到 100% 動畫過程中，.marquee-content 的 left 屬性從 0 逐漸變化到一個負(fù)值，這里假設(shè)內(nèi)容寬度為容器寬度的 100%，所以設(shè)置為 -100%，實現(xiàn)向左滾動的效果。如果內(nèi)容長度不同，需要相應(yīng)調(diào)整該值。

　　4. 動畫應(yīng)用與持續(xù)時間設(shè)置

　　將定義好的動畫應(yīng)用到 .marquee-content 上，并設(shè)置動畫的持續(xù)時間和循環(huán)次數(shù)：

　　css

　　.marquee-content {

　　animation: marquee 10s linear infinite;

　　}

　　這里設(shè)置動畫名稱為 marquee，持續(xù)時間為 10 秒，linear 表示動畫勻速進行，infinite 表示動畫無限循環(huán)。

　　5. 懸停效果實現(xiàn)

　　為了實現(xiàn)當(dāng)鼠標(biāo)移入跑馬燈區(qū)域時暫停滾動的效果，使用 CSS 的 :hover 偽類：

　　css

　　.marquee-container:hover.marquee-content {

　　animation-play-state: paused;

　　}

　　當(dāng)鼠標(biāo)懸停在 .marquee-container 上時，.marquee-content 的動畫播放狀態(tài)將被設(shè)置為暫停。

　　三、優(yōu)化與擴展

　　1. 無縫滾動優(yōu)化

　　上述代碼實現(xiàn)了基本的橫向滾動，但在滾動到末尾時會有一個跳躍感，不是真正的無縫滾動。為了實現(xiàn)無縫滾動，可以復(fù)制一份 .marquee-content 并將其緊跟在原始內(nèi)容后面，然后調(diào)整動畫的移動距離：

　　html

      </p>

　　這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。

　　這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。這是一段需要滾動展示的文本信息。

      </p>

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -200%; /* 因為有兩份內(nèi)容，所以移動距離加倍 */

　　}

　　}

　　通過這種方式，當(dāng)?shù)谝环輧?nèi)容滾動出去后，第二份內(nèi)容緊接著開始滾動，實現(xiàn)了無縫銜接的視覺效果。

　　2. 適配不同內(nèi)容長度

　　如果跑馬燈中的內(nèi)容長度是動態(tài)變化的，不能固定動畫的移動距離?？梢允褂?JavaScript 來獲取內(nèi)容的實際寬度，并動態(tài)設(shè)置 CSS 變量，然后在 CSS 中使用該變量來控制動畫移動距離：

　　html

      <p>

　　這是一段可能變化長度的文本信息。

　　這是一段可能變化長度的文本信息。

      </p>

　　javascript

　　const marquee = document.getElementById('marquee');

　　const marqueeText = document.getElementById('marquee-text');

　　const contentWidth = marqueeText.offsetWidth;

　　marquee.style.setProperty('--content-width', `${contentWidth}px`);

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: calc(-1 * var(--content-width));

　　}

　　}

　　這樣，無論內(nèi)容長度如何變化，都能實現(xiàn)準(zhǔn)確的無縫滾動效果。

　　通過純 CSS 實現(xiàn)橫向跑馬燈的無縫滾動輪播及移入懸停功能，為網(wǎng)頁增添了動態(tài)和交互性。開發(fā)者可以根據(jù)實際需求進一步優(yōu)化和擴展該效果，應(yīng)用于各種網(wǎng)頁項目中，如新聞資訊滾動展示、廣告輪播等，提升用戶體驗和頁面吸引力。