js如何實(shí)現(xiàn)文字閃爍特效

js
小億
228
2023-08-08 23:20:24

可以使用JavaScript中的定時(shí)器和CSS樣式來(lái)實(shí)現(xiàn)文字閃爍特效。

HTML代碼如下：

<div id="text">Hello, World!</div>

CSS代碼如下：

.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

JavaScript代碼如下：

var text = document.getElementById('text');
setInterval(function() {
text.classList.toggle('blink');
}, 1000);

在上述代碼中，首先使用setInterval函數(shù)來(lái)定時(shí)切換文字的CSS類(lèi)名，以實(shí)現(xiàn)閃爍效果。每隔1秒鐘，通過(guò)classList對(duì)象的toggle方法來(lái)添加或移除CSS類(lèi)名blink，從而切換文字的顯示和隱藏。CSS樣式中定義了一個(gè)名為blink的動(dòng)畫(huà)效果，通過(guò)opacity屬性來(lái)控制文字的透明度，在0%到50%的時(shí)間內(nèi)，文字透明度為0，即隱藏狀態(tài)；在50%到100%的時(shí)間內(nèi)，文字透明度為1，即顯示狀態(tài)。最后，將CSS樣式應(yīng)用到HTML元素上，通過(guò)classList對(duì)象的toggle方法來(lái)切換動(dòng)畫(huà)效果的啟用和禁用。

0 踩