使用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"></span> 元素。
示例（JS 简易生成）：
const sky = document.querySelector('.sky');
for (let i = 0; i <h3>2. 定义柔和闪烁的关键帧动画</h3><p>关键不是“亮→灭”，而是“微亮→稍暗→微亮”，幅度小（如 opacity 0.3 → 0.8 → 0.4）、周期长（3–8 秒）、带缓动。避免使用 <code>linear</code>，用 <code>ease-in-out</code> 或自定义 <code>cubic-bezier(.4, 0, .6, 1)</code> 更自然。</p><p>CSS 示例：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false;">@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;
}</p>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;
}</p>
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、幅度
