今天我們來介紹一種用 CSS 實現從左至右滾動顯示的效果。

首先，我們需要使用 CSS 中的動畫特性：animation。通過限制動畫的寬度（比如設置成 100%），文本就可以實現從左至右的滾動效果。以下是示例代碼：

.scrolling-text {
white-space: nowrap; /* 防止文本換行 */
overflow: hidden; /* 隱藏溢出部分 */
animation: scrolling 10s linear infinite; /* 動畫設定 */
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

上述代碼中，首先定義了一個名為 scrolling-text 的 CSS 類。將要實現滾動效果的文本都需要添加該類。我們通過 white-space 和 overflow 屬性設置文本不換行、溢出隱藏。接著使用 animation 屬性并傳入一個名為 scrolling 的動畫設定（后面會詳細說明），使文本產生滾動效果。

接著，我們在代碼中定義了一個名為 scrolling 的動畫，用于實現從左至右滾動的效果。該動畫在 0% 時將文本 translateX 為 0，即默認位置。在 100% 時將文本 translateX 為 -100%（原本寬度的負數），達到從左至右滾動的效果。

最后，我們再來看看如何實現該效果：

<div class="scrolling-text">這是一段需要滾動顯示的文本</div>

以上就是從左至右滾動顯示文本的方法，希望對大家有幫助。