html5废弃了标签，应使用css动画配合、等语义化标签实现可控闪烁；推荐opacity动画、≥0.8s时长、3次循环，兼顾可访问性与性能。
HTML5 里没有 <blink></blink>，别用它标重点
HTML5 明确废弃了 <blink></blink> 标签，所有现代浏览器都不支持，强行写进去等于没写。想“标注重点+闪烁提醒”，必须用 CSS 动画配合语义化标签（比如 <strong></strong>、<mark></mark> 或带 class 的 <span></span>）来实现。
用 @keyframes + animation 实现可控闪烁
闪烁本质是颜色或透明度的周期性变化，CSS 动画最稳妥。关键不是“一直闪”，而是控制次数、时长和触发时机，避免干扰阅读或引发光敏不适。
- 用
opacity闪烁比改color更安全（兼顾背景色不可控场景） - 动画时长建议 ≥ 0.8s，太快易眩晕；重复次数用
3或infinite，但生产环境慎用无限循环 - 加
animation-fill-mode: forwards可让最后一帧保持，适合“闪完高亮定格”场景
@keyframes blink-highlight {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.warning-flash {
animation: blink-highlight 1.2s ease-in-out 3;
}
<mark></mark> 是 HTML5 原生重点标注，但默认不闪烁
<mark></mark> 语义正确——表示文档中需要引起注意的文本（如搜索结果匹配项），但它只是个普通元素，样式完全靠 CSS 控制。直接给它加动画就行，不用额外 wrapper：
<p>请立即检查 <mark class="warning-flash">配置文件路径</mark> 是否正确。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2146" title="简篇AI排版"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680265669916.png" alt="简篇AI排版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2146" title="简篇AI排版">简篇AI排版</a>
<p>AI排版工具，上传图文素材，秒出专业效果！</p>
</div>
<a href="/ai/2146" title="简篇AI排版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><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>
注意：若页面已有全局 mark 样式（比如黄色背景），动画中的 opacity 会同时影响背景和文字，此时改用 color + text-shadow 更精准。
闪烁动画在可访问性（a11y）和性能上容易被忽略
自动闪烁对光敏用户有风险，WCAG 2.1 明确要求避免 3 次/秒以上的闪烁。实际做法：
- 只在用户主动触发后播放（如点击按钮才启动
animation-play-state: running） - 提供关闭开关，并用
@media (prefers-reduced-motion: reduce)全局禁用动画 - 避免在长列表或高频更新区域（如实时日志）使用，重绘开销会上升
真正难的不是让字闪起来，而是判断该不该闪、什么时候闪、闪几次——多数需求其实用一次脉冲（scale(1.05) + opacity）比来回闪烁更有效，也更友好。
