在網(wǎng)頁制作中，跑馬燈式的標題往往能夠吸引用戶的眼球，提高網(wǎng)站的活躍度。如何用 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);
}
}

以下是實現(xiàn)效果：

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

這個 CSS 制作跑馬燈效果的方法簡單易懂，可以應(yīng)用于不同的網(wǎng)頁設(shè)計場景中，幫助美化產(chǎn)品內(nèi)容及頁面設(shè)計。