CSS3 動畫是現(xiàn)代 web 開發(fā)的重要組成部分之一，它可以幫助我們創(chuàng)建各種各樣有趣的效果，比如跑馬燈。下面我們將介紹如何使用 CSS3 實(shí)現(xiàn)一個簡單的跑馬燈動畫。

/* CSS 代碼片段 */
.marquee {
white-space: nowrap;
overflow: hidden;
animation: marquee 5s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

首先，我們需要創(chuàng)建一個 HTML 元素來包裝跑馬燈內(nèi)容。

<div class="marquee">
This is a simple marquee animation demonstration.
</div>

然后，應(yīng)用上述 CSS 代碼片段，其中包括以下幾個部分：

• white-space: nowrap;禁止文本換行。
• overflow: hidden;隱藏溢出內(nèi)容，以便實(shí)現(xiàn)跑馬燈效果。
• animation: marquee 5s linear infinite;應(yīng)用名為 marquee 的動畫，持續(xù) 5 秒，線性過渡，無限循環(huán)。

接著，我們需要定義動畫效果，也就是利用@keyframes規(guī)則定義動畫的各個關(guān)鍵幀。

• 0% { transform: translateX(100%); }在動畫開始時，文本位于容器的最右側(cè)。
• 100% { transform: translateX(-100%); }在動畫結(jié)束時，文本位于容器的最左側(cè)，同時我們使用translateX函數(shù)來實(shí)現(xiàn)平移效果。

最終，我們得到了一個簡單但有趣的跑馬燈動畫，它可以應(yīng)用于網(wǎng)站標(biāo)題、廣告宣傳等場合。