使用CSS关键帧实现星空微闪效果：通过JS动态生成150颗随机位置/大小/延迟的星星，定义opacity在0.3–0.8间缓动变化的twinkle动画，差异化设置每颗星的duration（4–9s）、delay（-2s至+6s）和timing-function，并适配prefers-reduced-motion。
用 CSS 关键帧（@keyframes）实现 H5 页面背景星空的微弱闪烁效果，核心是控制多个“星星”元素的透明度（opacity）做随机、低频、非同步的轻微变化，避免生硬闪烁，营造自然深邃感。
1. 创建星星 DOM 结构（建议用伪元素或 JS 动态生成）
不推荐手动写几百个 <div class="star"></div>。更轻量的做法是：用一个容器（如 .sky），通过伪元素 ::before 或 ::after 模拟部分星星；或用 JS 生成 100–200 个带随机位置/大小/延迟的 <span class="star"> 元素。
示例（JS 简易生成）：
const sky = document.querySelector('.sky');
for (let i = 0; i < 150; i++) {
const star = document.createElement('span');
star.classList.add('star');
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.width = `${Math.random() * 2 + 0.5}px`;
star.style.height = star.style.width;
star.style.opacity = Math.random() * 0.5 + 0.2; // 初始透明度 0.2–0.7
star.style.animationDelay = `${Math.random() * 4}s`; // 随机起始时间
sky.appendChild(star);
}2. 定义柔和闪烁的关键帧动画
关键不是“亮→灭”，而是“微亮→稍暗→微亮”，幅度小（如 opacity 0.3 → 0.8 → 0.4）、周期长（3–8 秒）、带缓动。避免使用 linear，用 ease-in-out 或自定义 cubic-bezier(.4, 0, .6, 1) 更自然。
CSS 示例：
@keyframes twinkle {
0% { opacity: 0.3; }
50% { opacity: 0.8; }
100% { opacity: 0.4; }
}
<p>.star {
position: absolute;
background: #fff;
border-radius: 50%;
animation: twinkle 5s ease-in-out infinite;
}3. 让每颗星闪烁节奏不同（避免齐闪）
统一动画会导致所有星星同步明暗，失去真实感。必须差异化：
- 用 JS 设置每个
.star的animation-duration（如 4–9s）、animation-delay（-2s 到 +6s）和animation-timing-function（可选 2–3 种缓动） - 或用 CSS 自定义属性（CSS Custom Properties）配合 :nth-child(n) 批量设置差异（适合静态伪元素方案）
例如（CSS 方式，适用于伪元素星星）：
.sky::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background:
radial-gradient(circle at 10% 20%, #fff 0, transparent 50%) 0 0 / 2px 2px,
radial-gradient(circle at 85% 65%, #fff 0, transparent 50%) 0 0 / 1.2px 1.2px;
background-repeat: repeat;
opacity: 0.6;
animation: twinkle 6s ease-in-out infinite;
}
<p>.sky::before {
animation-duration: 7.2s;
animation-delay: -1.3s;
}
.sky::after {
content: "";
/<em> 更多随机位置星星... </em>/
animation-duration: 4.8s;
animation-delay: 2.1s;
}4. 性能与移动端适配要点
H5 页面常在手机端运行，需兼顾流畅与省电：
- 只对
opacity和transform做动画（触发 GPU 加速），避免top/left或background-position - 给
.star添加will-change: opacity（仅在必要时，不宜滥用） - 在低端安卓机上，可检测
prefers-reduced-motion并关闭动画：@media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: 0.5; } } - 星空背景建议设为
fixed或全屏绝对定位，避免随页面滚动重绘
不复杂但容易忽略：真正自然的星空不是“每颗都闪”，而是大部分恒定微光，少数缓慢脉动。可让约 20% 的星星动画时长 >6s、幅度
