CSS 走馬燈動畫是一種在網頁設計中常用的動效特效，它可以通過 CSS 屬性控制元素的移動，使元素看起來像是在走馬燈輪播中滾動。本文將向您介紹如何使用 CSS 制作走馬燈動畫。

/* HTML */<div class="carousel">
<ul>
<li>圖片1</li>
<li>圖片2</li>
<li>圖片3</li>
</ul>
</div>/* CSS */.carousel {
width: 600px;
overflow: hidden;
}
.carousel ul {
display: flex;
animation: marquee 12s linear infinite;
}
.carousel li {
flex-shrink: 0; /* 禁止壓縮 */
width: 600px;
height: 400px;
margin-right: 20px;
background-color: #eee;
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-900px); }
}

在 HTML 中，我們可以使用一個 div 包含一個無序列表（ul），ul 中的每個列表項（li）代表一個需要輪播的元素。在 CSS 中，我們將 div 的寬度設置為輪播區域的寬度，并將其 overflow 設置為 hidden，使得 ul 內部的元素被裁剪。接下來，我們設置 ul 的 display 為 flex，讓其內部的元素可以橫向排列；使用 animation 屬性讓 ul 沿著 X 軸上做來回運動的動畫，其中 12s 是運動時間，linear 代表的是動畫運動的軌跡；我們還設置了每個列表項的寬度、高度、外邊距等屬性，并通過 align-items 和 justify-content 屬性居中顯示其內容。最后，在 @keyframes 中設置動畫運動軌跡的關鍵幀，使 ul 在運動過程中不斷向左偏移。

通過以上幾步，我們就可以輕松地使用 CSS 制作一個簡單的走馬燈動畫啦！