今天我們來學習一下如何使用CSS來制作滾動字幕。首先我們需要在HTML中添加一個容器元素，用來包裹字幕內容。例如：

<div class="scrollable">
<p>這是一條滾動字幕。</p>
</div>

然后我們要使用CSS來實現滾動效果。我們可以通過設置容器元素的overflow屬性為hidden來隱藏溢出字幕內容。然后我們再設置容器元素的position屬性為relative，這樣我們可以對容器元素中的元素進行定位。例如：

.scrollable {
overflow: hidden;
position: relative;
}

接下來，我們可以為字幕內容創建一個絕對定位的元素。需要注意的是，我們要將字幕內容元素的左側位置設置為容器元素的寬度，這樣可以確保字幕內容會從容器的右側開始滾動。我們可以通過設置元素的position屬性為absolute，然后設置left屬性為100%來實現這個目標。例如：

.scrollable p {
position: absolute;
left: 100%;
}

最后，我們需要定義一個動畫，使字幕內容元素滾動。我們可以使用CSS3中的@keyframes規則來定義動畫，然后將這個動畫添加到字幕內容元素上。例如：

@keyframes scroll {
from { left: 100%; }
to { left: -100%; }
}
.scrollable p {
animation: scroll 10s linear infinite;
}

在上面的代碼示例中，我們定義了一個名為scroll的動畫，從容器元素的右側開始，直到容器元素的左側結束。我們將這個動畫應用于字幕內容元素，并且使動畫無限循環并且具有線性運動曲線。
現在我們已經成功地實現了滾動字幕的效果。你可以調整動畫的持續時間和字幕內容的樣式以滿足你的需求。這是一個非常有趣的CSS應用場景，對于打造更具有趣味性和交互體驗的網站非常有幫助。