CSS3實現跑馬燈效果

跑馬燈是一種常見的網頁效果，用于展示滾動的文字或圖片，具有很好的視覺效果和交互性。在CSS3中，我們可以使用animation屬性輕松實現跑馬燈效果。

/* 首先定義一個容器，設置寬度和高度 */
.container {
width: 100%;
height: 50px;
overflow: hidden;  
}
/* 再定義滾動的內容，如文字 */
.content {
width: max-content; /* 設置滾動內容的寬度為最大寬度 */
display:inline-block; /* 內容以行內元素方式展示 */
animation: marquee 10s linear infinite; /* 設置滾動效果，10秒動畫，線性運動，無限循環 */
}
/* 定義滾動效果 */
@keyframes marquee {
0%   { transform: translateX(0); } /* 初始位置為0 */
100% { transform: translateX(-100%); } /* 終止位置為容器寬度的相反數 */
}

代碼中首先定義了一個.container容器，設置寬度和高度，并將overflow屬性設置為hidden，表示不顯示溢出內容。接著定義了一個.content元素，寬度為最大寬度且以行內元素的方式展示。animation屬性開始了滾動效果，定義了10秒的動畫，線性運動，無限循環。同時使用@keyframes定義了滾動效果的起始和終止位置。transform: translateX表示在X軸方向上平移元素的位置，0%表示初始位置，-100%表示終止位置。

通過以上代碼，我們就可以輕松實現一個簡單的跑馬燈效果。此外，我們還可以根據實際需求對animation和@keyframes進行調整，實現不同的滾動效果。