如何自製順暢的跑馬燈?簡單的CSS+HTML即可完成

   641 VIEWS

做過跑馬燈的朋友應該都知道 HTML 有個語法是<marquee>,不過這個已經過時,許多瀏覽器也不支援,用這個的話會讓某些瀏覽器看起來卡頓甚至失效,因此如果現在想做一個順暢的跑馬燈可以試試 CSS 的動畫效果。

廢話不多說,來看以下 code 吧: <style type="text/css">
.marquee {
height: 50px;
overflow: hidden;
}
.marquee h3 {
font-size: 1em;
color: #000;
transform:translateX(100%);
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { 
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="marquee">
<h3>我是跑馬燈~跑呀跑呀跑~</h3>
</div>
效果範例:DEMO:跑馬燈

CSS 動畫效果說明

先做一個div區塊,指定height為自訂高度,overflow:hidden表示超過區塊之後的文字做隱藏,接著透過transform來指定動畫的轉變,translateX代表水平的位置,預設100%表示一開始文字在div區塊外(右方),animation則是指定動畫方式,20s 為移動速度,數字越小越快,linear代表線性,infinite表示無限。

@keyframes就是指定動畫的效果,0%表示初始,100%則是結束,因此上述 code 表示一開始位置在區塊右側之外,結束時位置消失在區塊左側之外(用translateX(-100%)來做隱藏)。這樣便完成簡單的跑馬燈了。

當然也可以根據自己的喜好進一步設計文字大小、顏色或背景,例如我最近想做一個傳統跑馬燈字幕機,那就可以在div放準備好的背景圖,然後設定border即可。

效果範例:DEMO:傳統跑馬燈字幕機


時雨 時雨,時雨の町-日文學習園地站長,為了記錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站相關知識與網頁程式語言。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS