圖片跑馬燈樣式是一種常用的網頁設計效果，讓頁面變得更加生動有趣。下面介紹一下如何使用CSS實現這種效果。

// HTML布局
<div class="carousel">
<ul class="carousel-content">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
</div>
// CSS樣式
.carousel {
width: 500px;
height: 250px;
overflow: hidden; /* 隱藏超出部分 */
}
.carousel-content {
display: flex; /* 設置彈性盒子 */
margin: 0;
padding: 0;
width: 150%; /* 總寬度是圖片寬度的150% */
animation: carousel-scroll 10s infinite; /* 滾動動畫 */
}
.carousel-content li {
list-style: none; /* 去掉li元素自帶的編號 */
width: 33.333333%; /* 每個li元素的寬度 */
}
// 動畫
@keyframes carousel-scroll {
0% {
transform: translateX(0); /* 初始值 */
}
100% {
transform: translateX(-33.333333%); /* 結束值 */
}
}

這段代碼的注釋很清楚地解釋了實現圖片跑馬燈效果的具體步驟。通過設置容器的寬高和overflow屬性，確定只顯示出指定大小的區域，并隱藏超出的圖片。利用彈性盒子和列表，將圖片均分成幾份，實現圖片的排列。通過CSS動畫，實現圖片的滾動效果。

總之，使用CSS實現圖片跑馬燈效果比較簡單，只需要一些基本的CSS屬性和動畫即可。希望本篇文章能夠對大家有所幫助。