跑馬燈代碼

跑馬燈 純文字

<marquee direction="left" align="middle" height="30" scrollamount="5" >歡迎來到 XXXXXXXX </marquee>

跑馬燈 有連結

<marquee direction="left" align="middle" height="30" scrollamount="5" >
<a href="##############" target="_blank">XXXXXXXXXXX</a></marquee>

跑馬燈 有圖有連結

<marquee>
<img src="圖形的http位置" width="圖寬" height="圖高"> 
<a href="超連結的網址" target="_blank">要超連結的文字</a>
</marquee>

跑馬燈 更改文字顏色

<marquee direction="left" align="middle" height="30" scrollamount="5" >
<div style="color:#111">此內容為黑色的文字</div></marquee>

Flatsome text 可以讓文字有跑動的效果 (class=”count-up”)

<h2><span style="color: #6fa6d4; font-size: 300%;"><span class="count-up">85</span>%</span></h2>

Elementor 用CSS變跑馬燈

參考網站：Scrolling Marquee Text (Elementor Tutorial)

另外改變css的linear 就可以改變跑馬燈動畫方向

參考網站：CSS animation-direction

Full Screen Scrolling Text CSS Code:

.marqueeheading h2{
	animation: cssmarquee 10s linear infinite;
}

@keyframes cssmarquee {
	0% {
		transform: translateX(100vw);
	}
	100% {
		transform: translateX(-100vw);
	}
}

Masked Scrolling Text CSS Code:

.marqueeheading h2{
	animation: cssmarquee 15s ease-in-out infinite alternate;
}

.marqueeheading {overflow: hidden;}
@keyframes cssmarquee {
	0% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}