CSS是網頁設計中必不可少的一部分，它可以控制網頁中各個元素的樣式和布局。在CSS中，我們可以通過一些簡單的代碼實現字幕水平滾動的效果。
/* CSS代碼實現字幕水平滾動效果 */
.marquee {
overflow: hidden; /* 隱藏超出容器范圍的內容 */
white-space: nowrap; /* 禁止文本自動換行 */
}
.marquee p {
display: inline-block; /* 將p元素轉換為內聯塊元素 */
margin-right: 30px; /* 設置字幕之間的間距 */
/* 使用動畫實現字幕滾動 */
animation: marquee 10s infinite linear;
animation-delay: 1s;
}
/* 定義動畫效果 */
@keyframes marquee {
100% {
transform: translateX(-100%); /* 沿著X軸向左移動100% */
}
}在上面的代碼中，我們首先創建一個名為“marquee”的CSS類，將其應用于容器元素（如
），并使用overflow屬性隱藏超出容器范圍的內容。接下來，在各個或
元素中輸入要滾動的文本，將它們轉換為內聯塊元素，并通過白色間距將它們隔開。最后，使用動畫實現字幕的水平滾動效果。
動畫部分采用CSS3的新特性-@keyframes，我們在其中定義了動畫效果，并將其應用于各個元素。animation屬性用于指定動畫的名稱、持續時間、循環次數和定時函數。這里我們設置動畫名稱為“marquee”，使其在10秒內無限循環，采用線性過渡效果，延遲1秒啟動。
在實際應用中，CSS滾動字幕效果可以應用于新聞、公告等需要重復播放的信息，它不僅可以提升網頁的視覺效果，而且還可以幫助用戶更好地了解網頁所提供的內容。
下一篇div 加圓角