流星加载动画（Meteor Loader 星空流星划过）

效果演示（真实可交互）

深蓝星空底上，46 颗星星随机分布并缓慢闪烁，2-6 颗流星以不同的速度与延迟斜向划过，每颗流星带白色头部光晕与渐变尾迹。流星数量与速度均可实时调节。

完整代码

HTML 结构：

<div class="ml-stage">
  <!-- 星星与流星均由 JS 动态生成 -->
</div>

CSS 核心：

/* 流星：一条渐变光带，头部用伪元素画光晕 */
.ml-meteor {
  position: absolute; width: 120px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95),
              rgba(150,190,255,.4) 55%, transparent);
  transform: rotate(-35deg); opacity: 0;
  animation: ml-fly 2.2s ease-in infinite;
}
.ml-meteor::before {
  content: ''; position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 3px rgba(160,200,255,.9);
}
@keyframes ml-fly {
  0%   { transform: translate3d(-60px,-30px,0) rotate(-35deg) scale(.7); opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translate3d(420px,240px,0) rotate(-35deg) scale(1); opacity: 1; }
  30%, 100% { transform: translate3d(560px,320px,0) rotate(-35deg); opacity: 0; }
}

/* 星星闪烁 */
.ml-star { position: absolute; border-radius: 50%; background: #fff;
           animation: ml-twinkle 2.6s ease-in-out infinite; }
@keyframes ml-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

JS 核心（随机生成流星）：

for (let i = 0; i < count; i++) {
  const m = document.createElement('span');
  m.className = 'ml-meteor';
  m.style.cssText = [
    `top:${rand(4, 50)}%`,                    // 起点纵向位置
    `left:${rand(-10, 45)}%`,                 // 起点横向位置
    `animation-duration:${(dur * rand(0.8, 1.3)).toFixed(2)}s`,
    `animation-delay:${rand(0, 3).toFixed(2)}s`
  ].join(';');
  stage.appendChild(m);
}

参数说明

兼容性与性能

• 流星只动 transform 与 opacity，全程 GPU 合成层，多颗同时划过也不卡顿
• 星星为静态节点 + 透明度闪烁，无布局参与
• 兼容 Chrome / Firefox / Safari / Edge 最新版；JS 生成节点的方式在各端一致
• 流星数量建议不超过 6 颗，避免合成层过多；移动端可降为 2-3 颗
• 适合游戏加载、太空主题页、科技发布会倒计时、深色品牌站的品牌化等待场景

常见问题

Q: 流星轨迹只有一小段就消失了？ 流星是固定长度的渐变光带，靠 translate3d 快速位移产生”划过”视觉；如果容器较小，把 ml-fly 里的位移距离改小（如 260px/160px）即可让轨迹完整可见。

Q: 想让流星从不同角度飞过？ 每颗流星用行内样式覆盖 --ml-angle（旋转角度），keyframes 里改为 rotate(var(--ml-angle))，就能实现多角度交叉的流星雨。

Q: 星星太多导致画面闪烁刺眼？ 把 ml-twinkle 的透明度范围从 .25/.9 收窄到 .4/.8，或把动画时长加大到 4s，闪烁会柔和很多。

Q: 页面有深色主题时还能用吗？ 本组件本身就是深空背景，直接嵌入深色页面无违和；放在浅色页面时建议包一层圆角容器并加边框，避免突兀。