html如何设置闪烁_HTML文字/元素闪烁动画实现方法

<style>
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.blink-text {
  animation: blink 1s step-start infinite;
}
</style>
<p><p class="blink-text">这段文字会持续闪烁</p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

<style>
.blink-once {
  opacity: 1;
  transition: opacity 0.5s;
}
</style>
<p><div id="flashMsg">新消息到达！</div></p><p><script>
const el = document.getElementById('flashMsg');
function flashElement() {
for(let i = 0; i < 6; i++) {
setTimeout(() => {
el.style.opacity = (i % 2 === 0) ? '0' : '1';
}, i * 500);
}
}
flashElement(); // 调用后闪烁3次
</script></p>

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}