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

　　一、HTML 結構搭建

　　首先，構建跑馬燈的基本 HTML 結構。我們使用一個容器元素包裹住需要滾動的內容元素。例如：

　　html

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

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

　　二、CSS 樣式設置

　　1. 容器樣式

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

　　css

　　.marquee-container {

　　width: 100%;

　　height: 50px; /* 根據需求調整高度 */

　　overflow: hidden;

　　position: relative;

　　}

　　2. 內容樣式

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

　　css

　　.marquee-content {

　　white-space: nowrap;

　　position: absolute;

　　left: 0;

　　top: 0;

　　display: flex;

　　align-items: center;

　　}

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

　　3. 動畫關鍵幀定義

　　使用 CSS 動畫來實現跑馬燈的滾動效果，通過 @keyframes 規則定義動畫關鍵幀：

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -100%; /* 根據內容長度調整移動距離 */

　　}

　　}

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

　　4. 動畫應用與持續時間設置

　　將定義好的動畫應用到 .marquee-content 上，并設置動畫的持續時間和循環次數：

　　css

　　.marquee-content {

　　animation: marquee 10s linear infinite;

　　}

　　這里設置動畫名稱為 marquee，持續時間為 10 秒，linear 表示動畫勻速進行，infinite 表示動畫無限循環。

　　5. 懸停效果實現

　　為了實現當鼠標移入跑馬燈區域時暫停滾動的效果，使用 CSS 的 :hover 偽類：

　　css

　　.marquee-container:hover.marquee-content {

　　animation-play-state: paused;

　　}

　　當鼠標懸停在 .marquee-container 上時，.marquee-content 的動畫播放狀態將被設置為暫停。

　　三、優化與擴展

　　1. 無縫滾動優化

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

　　html

      </p>

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

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

      </p>

　　css

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

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

　　}

　　}

　　通過這種方式，當第一份內容滾動出去后，第二份內容緊接著開始滾動，實現了無縫銜接的視覺效果。

　　2. 適配不同內容長度

　　如果跑馬燈中的內容長度是動態變化的，不能固定動畫的移動距離?？梢允褂?JavaScript 來獲取內容的實際寬度，并動態設置 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));

　　}

　　}

　　這樣，無論內容長度如何變化，都能實現準確的無縫滾動效果。

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