跑馬燈文字是一種特殊的排版方式，用於展示滾動的信息。如果加入動效，可以更加吸引人的眼球，常見於網站首頁或廣告展示等場景。本文將從以下幾個方面詳細介紹如何製作帶動效的跑馬燈文字。
一、使用CSS3動畫製作跑馬燈效果
利用CSS3的 animation 屬性可以很方便的實現動畫效果，結合使用 JavaScript 就可以做到跑馬燈的效果。下面是一個示例：
.marquee-ct {
width: 500px;
height: 60px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}.marquee-item {
position: absolute;
top: 0;
height: 100%;
animation: marquee 12s linear infinite;
}.marquee-item:nth-of-type(1) {
animation-delay: 0s;
left: 0;
}.marquee-item:nth-of-type(2) {
animation-delay: 6s;
left: 500px;
}@keyframes marquee {
0% {
transform: translateX(0);
}100% {
transform: translateX(-500px);
}
}跑馬燈文字1
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/284832.html
微信掃一掃 
支付寶掃一掃 