在網頁制作中，跑馬燈式的標題往往能夠吸引用戶的眼球，提高網站的活躍度。如何用 CSS 制作一個舒適的跑馬燈效果呢？

marquee {
white-space: nowrap;
overflow: hidden;
position: relative;
box-sizing: border-box;
width: 100%;
}
marquee p {
display: inline-block;
padding-right: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}

以下是實現效果：

通過設置一個marquee容器，將其中的各個標題元素顯示為一行內聯塊元素<p>，并設置其寬度為 100%，將文本溢出部分隱藏。通過動畫animation實現在 10s 內讓標題從左往右連續滾動，滾動完后再從起點開始滾動。

這個 CSS 制作跑馬燈效果的方法簡單易懂，可以應用于不同的網頁設計場景中，幫助美化產品內容及頁面設計。