应使用@keyframes+opacity实现闪烁，禁用已废弃的标签；其因语义错误、全浏览器无视且违反WCAG可访问性要求而被HTML5移除。
直接用 @keyframes + opacity 实现，别碰已废弃的 标签——它在所有现代浏览器里都不起作用，且会被屏幕阅读器读成“闪烁标签”，语义错误。
为什么不能用
该标签自 HTML5 起被正式移除，Chrome、Firefox、Safari、Edge 全部无视。即使写上，控制台无报错，但元素完全不闪烁；更严重的是，它没有语义，辅助技术会跳过或误读，违反 WCAG 基本可访问性要求。
animation: blink 1s step-start infinite 的关键参数含义
这个声明里每个词都影响效果和兼容性：
-
blink：必须与@keyframes blink名称严格一致，大小写敏感 -
1s：动画周期，设太短（如0.3s）易引发视觉疲劳，iOS Safari 对高频闪烁有自动降频机制 -
step-start：强制硬切，避免 opacity 渐变过渡；换成linear就变成“淡入淡出”，不是“闪烁” -
infinite：无限循环；若只需闪 3 次，改用3，并加animation-fill-mode: forwards锁定终态
促销标签闪烁必须同步处理可访问性
闪烁本身对光敏用户有风险，W3C 明确建议：仅在必要提示场景（如“库存仅剩1件”）使用，且必须提供关闭机制。实操时注意：
- 用
aria-live="polite"包裹标签文字，让屏幕阅读器在内容更新时播报，而非依赖视觉闪烁 - 添加「暂停闪烁」按钮，并绑定
el.style.animationPlayState = 'paused'，不要用display: none隐藏——那会让辅助技术彻底丢失上下文 - 手机端慎用：iOS 上部分 WebView 对
animation的重绘触发不及时，建议在@media (hover: none)下降级为纯文字高亮（如background: #ff6a00; color: white;）
最常被忽略的不是怎么闪，而是闪完之后——用户是否真收到了信息。文字内容要直白（写「仅剩2件」，别写「Hurry!」），位置要稳定（父容器必须 position: relative），且每次 DOM 更新都要同步 textContent 和 aria-hidden 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
