可以使用JavaScript中的定時器和CSS樣式來實現文字閃爍特效。
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
函數來定時切換文字的CSS類名,以實現閃爍效果。每隔1秒鐘,通過classList
對象的toggle
方法來添加或移除CSS類名blink
,從而切換文字的顯示和隱藏。CSS樣式中定義了一個名為blink
的動畫效果,通過opacity
屬性來控制文字的透明度,在0%到50%的時間內,文字透明度為0,即隱藏狀態;在50%到100%的時間內,文字透明度為1,即顯示狀態。最后,將CSS樣式應用到HTML元素上,通過classList
對象的toggle
方法來切換動畫效果的啟用和禁用。