跑馬燈是網(wǎng)頁中常見的文本動畫效果，它能夠使文本在頁面上以一定的速度循環(huán)播放，增強頁面的視覺效果和用戶體驗。CSS 動畫技術(shù)使得實現(xiàn)跑馬燈效果變得更加簡單。

/* 在 CSS 中定義跑馬燈的動畫 */
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* 定義跑馬燈容器 */
.marquee-container {
width: 100%;
overflow: hidden;
}
/* 定義跑馬燈的文本 */
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
}

上面的 CSS 代碼中，使用 @keyframes 定義了名為 marquee 的動畫，它從左向右移動文本，完成一次循環(huán)需要 10 秒鐘。通過設(shè)置容器的 overflow 屬性為 hidden，可以使文本超出容器的部分不可見，達到跑馬燈的效果。

為了在頁面中使用這個跑馬燈，只需要在 HTML 中添加如下代碼：

<div class="marquee-container">
<span class="marquee-content">這里是跑馬燈的文本內(nèi)容</span>
</div>

這樣就完成了一個簡單的 CSS 跑馬燈?？梢愿鶕?jù)需要修改動畫的速度、文本的樣式以及容器的尺寸等參數(shù)，實現(xiàn)不同風(fēng)格的跑馬燈效果。