CSS3實(shí)現(xiàn)走馬燈，即可以輪播文字，圖片等內(nèi)容，是現(xiàn)代網(wǎng)站中很常見的特效之一。下面介紹如何使用CSS3實(shí)現(xiàn)走馬燈的效果。

<div class="wrapper">
<div class="marquee">
<p>這里是第一段文字</p>
<p>這里是第二段文字</p>
<p>這里是第三段文字</p>
</div>
</div>

首先，我們需要一個(gè)包含內(nèi)容的容器wrapper和一個(gè)移動的元素marquee。在marquee中添加多個(gè)p標(biāo)簽，每個(gè)p標(biāo)簽代表一段要輪播的文字內(nèi)容。

.wrapper {
overflow: hidden;
}
.marquee {
display: flex;
width: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

然后，我們需要設(shè)置wrapper容器的overflow為hidden，將超出容器的內(nèi)容隱藏。將marquee設(shè)為flex布局，使之內(nèi)部的內(nèi)容可以水平排列。使用CSS3動畫的關(guān)鍵幀實(shí)現(xiàn)文字內(nèi)容向左移動的效果。這里我們將marquee元素動畫的持續(xù)時(shí)間設(shè)置為10s，以線性方式進(jìn)行輪播，無限循環(huán)。

完整的CSS3走馬燈代碼：

.wrapper {
overflow: hidden;
}
.marquee {
display: flex;
width: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

以上就是使用CSS3實(shí)現(xiàn)走馬燈的方法，可以輪播任何類型的內(nèi)容，包括圖片，視頻等。