星光闪烁需用@keyframes控制opacity和transform三帧动画（0%全亮、50%微暗缩放、100%回亮），周期2s–3s避开WCAG频段，伪元素模拟光点并禁用pointer-events，JS需清理旧动画防止叠加卡顿。
用 @keyframes 控制按钮内嵌星光闪烁，别碰 visibility 或 display
直接改 visibility: hidden 或 display: none 会让按钮“抽搐”——布局重排、周围元素跳动、焦点丢失。星光闪烁必须保持 DOM 占位和交互能力，只动 opacity 和 transform。
核心动画只需三帧：0% 全亮（opacity: 1），50% 微暗带轻微缩放（opacity: 0.7; transform: scale(0.98)），100% 回亮。周期控制在 2s–3s 之间，避开 WCAG 禁止的 3Hz–50Hz 风险频段（即动画时长不能短于 0.02s，也不能落在 0.02–0.33s 区间）。
- 动画名必须唯一，避免和其他按钮冲突，比如叫
star-glint而不是通用的blink - 加
animation-timing-function: ease-in-out，比linear更自然，减少机械感 - 若按钮有圆角或阴影，确保
transform不触发裁剪：给父容器加overflow: visible，或用will-change: opacity提前提示渲染层
伪元素模拟星光点，::before 和 ::after 必须配合 position: absolute 定位
原生 <button> 对伪元素支持极差，Chrome/Firefox 可能直接忽略 ::after；Safari 在某些 UA 样式下也失效。强行使用会导致流星/星光不出现，且无法调试。
正确做法是放弃原生按钮语义，改用 <div role="button" tabindex="0">，再手动绑定 Enter 和 Space 键事件。星光点由两个伪元素承担：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
::before：小圆点（width: 4px; height: 4px），带box-shadow: 0 0 6px #fff, 0 0 12px #ffeb3b模拟高光 -
::after：稍大模糊点（width: 6px; height: 6px; filter: blur(2px)），透明度更低，延迟 0.1s 启动，制造“余晖”错觉 - 两个伪元素都设
top: 50%; left: 50%; transform: translate(-50%, -50%)居中，避免用left/top触发重排
JS 控制闪烁节奏，防止动画叠加卡顿
连续点击按钮时，CSS 动画实例不会自动销毁，旧动画还在跑，新动画又叠加进来，CPU 占用飙升，星光糊成一片白光。这不是浏览器 bug，是动画未清理的必然结果。
关键不是“开始动画”，而是“确认上一个已结束”。推荐用以下三步控制：
- 初始状态给伪元素加
animation: none，点击时才临时加class="glint-active" - 监听
animationend事件，在回调里移除该 class，清空状态 - 加防护判断：
if (el.classList.contains('glint-active')) return，避免重复触发 - 单次最多同时存在 2–3 个星光点，再多视觉干扰，也影响可访问性（屏幕阅读器会逐个播报）
深色背景适配与性能陷阱
星光在黑底上显眼，在灰底或白底上直接消失。别依赖单一颜色值，用 rgba() 控制透光度，例如 box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) 比 white 更可控。
最容易被忽略的是硬件加速缺失：没加 transform: translateZ(0) 或 will-change: transform 的动画，在滚动或缩放时掉帧严重，星光变成“卡顿残影”。尤其在 Chrome 120+ 和 Safari 17+ 中更明显。
另外，所有星光动画必须禁用 pointer-events：给伪元素加 pointer-events: none，否则它们会拦截鼠标事件，导致按钮点击失灵。
