CSS 字幕滾動功能是指通過 CSS 樣式來實現文字自動滾動播放，非常適用于新聞、廣告和公告欄等需要滾動播放的場合。下面給出一個基礎的 CSS 實現字幕滾動的代碼。

.scroll-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll-text p {
display: inline-block;
margin: 0;
padding-right: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

上面代碼實現了一個具有無限循環滾動功能的滾動字幕文本。讓我們逐個解析代碼實現的原理。

首先，在滾動字幕最外層的容器上，設置了overflow: hidden屬性，用于隱藏溢出的文本。接下來，在容器內部的文本元素上，設置了white-space: nowrap屬性，在文本超出容器寬度時，不自動換行。

接著，設置了display: inline-block屬性，用于將文本元素作為行內塊級元素顯示，以便于實現連續滾動的效果。同時，設置了margin: 0和padding-right: 100%屬性，用于消除默認的邊距和內邊距，并使文本元素占據容器寬度的所有空間。

最后，在文本元素上應用了關鍵幀動畫marquee，設置了滾動時間為 10s，速度為線性（即勻速滾動），并無限循環滾動。關鍵幀動畫中，通過transform: translate(-100%, 0)屬性，使文本元素每次滾動一個容器寬度的距離。

通過上述 CSS 代碼的實現，我們可以快速地實現一個基礎的滾動字幕效果，同時還可以根據需要調整樣式和動畫參數，實現個性化的滾動字幕效果。