DEMO:跑馬燈 - 黑貓城

展示範例區

跑馬燈

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

我是跑馬燈~跑呀跑呀跑~

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>