跑馬燈動畫是一種比較常見的網頁元素效果。在網頁中添加跑馬燈動畫可以吸引用戶的注意力，讓頁面更加活躍。下面讓我們介紹一下如何使用CSS來制作跑馬燈動畫。

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

上面的代碼中，我們首先定義了一個名為marquee的關鍵幀，表示我們要實現一個向左滾動的動畫效果。在關鍵幀的0%處，內容沒有進行任何變化，而在100%處，將內容向左平移100%的距離。接著，我們定義了一個名為.marquee的class，它的display屬性設置為block，表示它是一個塊級元素，不會和其他元素在同一行內顯示；white-space屬性設置為nowrap，表示它的文本內不允許換行；overflow屬性設置為hidden，表示當文本超出div的范圍時，超出部分會被隱藏。最后，我們給.marquee添加了一個名為marquee的動畫，其中10s表示動畫時長，linear表示動畫速度線性均勻，infinite表示動畫無限循環。

在HTML中，我們可以使用如下代碼來使用這個跑馬燈動畫：

<div class="marquee">
這里是跑馬燈動畫的內容，可以是文字、圖片等等。
</div>

使用上述代碼，就可以讓頁面中的文字或圖片變成一個向左滾動的動畫效果，從而吸引用戶的視線，提高頁面的活力。