DEMO:傳統跑馬燈字幕機 - 黑貓城

展示範例區

傳統跑馬燈字幕機

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

我是傳統跑馬燈字幕機~

Code

<style type="text/css">
.marquee {
margin-top: 2em;
height: 45px;
overflow: hidden;
background: url(/image/design/marquee.jpg);
border: 4px ridge #333;
}
.marquee h3 {
font-size: 1em;
color: #ffd700;
margin: 0;
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>