CSS 走馬燈效果是一種非常流行的網頁動畫效果，它可以使網頁上的內容以一定的速度向左或向右滾動，從而吸引用戶的注意力，并增加頁面的互動性。下面我們來看一下如何實現這個效果。

HTML 代碼：
<div class="carousel-container">
<div class="carousel-img">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
</div>
CSS 代碼：
.carousel-container {
width: 100%;
height: 400px;
overflow: hidden;
}
.carousel-img {
width: 300%;
-webkit-animation: carousel 10s infinite linear;
}
.carousel-img img {
width: 33.33%;
float: left;
}
@-webkit-keyframes carousel {
0% { margin-left: 0; }
100% { margin-left: -200%; }
}

在上面的代碼中，我們首先創建了一個 div 容器，用來承載圖片。接著在容器內部創建了多個 img 元素，這些元素即為我們需要展示的圖片。需要注意的是，展示的圖片數量必須是 3 的倍數，這樣才能保證每個圖片都能夠平均分布在容器中。

設置 CSS 樣式時，我們將容器的寬度設置為 100%，高度設置為 400px，這樣就可以讓容器占據整個屏幕。然后我們將容器的 overflow 屬性設置為 hidden，這樣就可以去掉默認的滾動條。

接著我們針對圖片容器設置了寬度為 300%，這樣就能夠將所有的圖片平均分配到容器內。接著我們使用 -webkit-animation 屬性來設定動畫效果，其中的 carousel 參數表示我們要使用的動畫名稱，10s 表示動畫的執行時間，infinite 表示動畫將無限循環，linear 表示動畫以線性的方式進行。最后我們使用 @-webkit-keyframes 來定義動畫的具體樣式，關鍵幀選擇器 0% 和 100% 表示動畫的起始和結束狀態，我們設置 margin-left 屬性來使圖片向左滾動。

通過以上的步驟，我們就可以輕松實現一個簡單的 CSS 走馬燈效果。當然我們還可以根據需要進行適當的調整，在實際應用中達到更好的效果。