在網頁設計中，滾動字幕是一個非常實用的元素。它可以吸引用戶的注意力，在有限的空間內滾動大量信息。在 CSS3 中，可以通過 CSS 動畫實現滾動字幕效果。

/* 定義字幕容器的樣式 */
.scroll-container {
width: 200px; /* 容器寬度 */
height: 50px; /* 容器高度 */
overflow: hidden; /* 隱藏超出容器范圍的元素 */
position: relative; /* 使子元素相對于容器定位 */
}
/* 定義滾動元素的樣式 */
.scroll-content {
position: absolute; /* 相對于容器定位 */
top: 0; /* 與容器頂部對齊 */
animation: scroll 10s linear infinite; /* 開始動畫 */
}
/* 定義滾動動畫 */
@keyframes scroll {
0% {
top: 0; /* 初始位置為容器頂部 */
}
100% {
top: -150px; /* 結束位置為超出容器高度的位置 */
}
}

通過定義一個包含滾動內容的容器和使用 CSS 動畫，可以輕松地實現滾動字幕效果。可以通過調整動畫屬性，如時間和速度，來達到滾動的速度和效果。另外，也可以通過 JavaScript 來控制滾動字幕的停止、播放和切換等功能。