CSS中走馬燈的實現可以讓網頁更加生動,讓內容更加吸引人。走馬燈主要是利用CSS3中的動畫特性實現的。在CSS中,我們可以通過@keyframe來定義動畫效果,然后通過animation屬性將動畫效果應用到指定元素上。
下面是一個簡單的CSS走馬燈實現的代碼:
p { overflow: hidden; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } p span { display: inline-block; white-space: nowrap; animation: slide 5s linear infinite; }首先,我們將包含文字的p標簽設置為overflow:hidden,這樣就可以隱藏超出p標簽范圍的文字。接著,我們利用@keyframes定義了一個slide動畫效果,在0%的時候,文字不偏移,然后通過transform屬性,在100%的時候將文字向左偏移100%。最后,我們將動畫效果應用到p標簽中的span標簽上,通過animation屬性指定動畫名稱、動畫時間、動畫速度、動畫次數等屬性。 需要注意的是,CSS走馬燈效果需要瀏覽器的支持,在某些老舊的瀏覽器中可能無法正常顯示。