正确做法是只用 opacity 和独立 animation-delay 实现星星闪烁，禁用 transform；必须设 position: absolute、overflow: hidden 和合适 z-index；JS 生成时用 DocumentFragment 批量插入，总数控制在 80–150 个。
星星闪烁动画用 opacity 和 animation-delay 控制，别用 transform 或 scale 模拟
闪烁本质是透明度周期性变化，不是缩放或位移。用 transform: scale(0) 假装“消失”会导致布局抖动、触发重排，且无法与真实透明度叠加。正确做法是只动 opacity，配合每个星星独立的 animation-delay 实现随机感。
- 所有星星共享同一套
@keyframes twinkle，只定义opacity: 0 → 1 → 0 - 每个
<div class="star"> 必须设唯一 <code>animation-delay（如-2.3s），值建议用 JS 生成或预设数组 - 避免用
Math.random()在 CSS 里动态写 delay——CSS 不支持运行时计算 - 动画时长统一设为
3s左右，太短像频闪，太长失去“闪烁”感 - 父容器（比如
或全屏<div id="bg">）必须设 <code>position: relative或position: fixed - 务必加
overflow: hidden，否则大量星星溢出时会撑大页面、出现横向滚动条 - 星星尺寸建议用
px（如width: 2px; height: 2px），避免用rem或%导致在高 DPI 屏上糊成一片 - 改用
document.createDocumentFragment()批量 append，最后一次插入 - 每个星星元素设
style.cssText = "animation-delay: -${delay}s;"，比多次.style.animationDelay = ...快 - 延迟值建议从固定数组取（如
[0.1, 1.7, 2.4, ...]），避免每帧都调Math.random()影响性能 - 星星总数控制在 80–150 个，再多视觉上无差别，纯属浪费渲染资源
- 现代项目直接忽略 IE，用
@supports (animation-name: twinkle)包裹动画规则，让 IE 安静降级 - 如果必须兼容，改用 JS
requestAnimationFrame控制 opacity，但帧率难保，且电池消耗明显上升 - 移动端 Safari 早于 iOS 13 对
animation-delay的负值支持不一致，测试时务必用真机看 -0.5s 是否立即启动
position: absolute 是必须的，父容器得设 overflow: hidden
星星要浮在内容上方、不占文档流，position: absolute 是唯一直接有效的方式。相对定位或 flex 布局会让星星随内容滚动或换行，破坏背景效果。
用 JS 批量生成星星时，别直接 innerHTML += 插入几百个节点
一次性拼接字符串再赋值给 innerHTML 看似快，但浏览器要反复解析 HTML、重建 DOM 树，100+ 星星就会卡顿，尤其低端手机。
IE 不支持 @keyframes 里的 opacity 动画，别硬兼容
IE10+ 虽支持 @keyframes，但对 opacity 的动画支持不稳定，常出现闪烁中断或全程不触发。强行加 -ms- 前缀也没用。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是星星的 z-index 层级和父容器的 background-color：如果背景不是纯黑或深色，低 opacity 的星星会发灰；如果没设 z-index: -1，星星可能盖住按钮或文字。这些细节不报错，但一上线就露馅。
