MOTION EFFECT

流星划过Shooting Stars

底色星空 + 几颗带短线拖尾缓慢划过的星星的组合，比 Meteors 更克制，像真实夜空。Aceternity UI 的 Stars Background 变体。

效果预览

Shooting Stars

适合用在哪

深色落地页背景、活动倒计时页、需要「安静的高级感」的场景。

容易踩的坑

星点同时闪烁会产生整屏明暗跳变，失去夜空的随机感。
3px 白点在高分屏上过小，Retina 下几乎看不见只剩拖尾。
背景动效持续运行却未响应 prefers-reduced-motion 设置。

设计提示词 · Prompt

流星划过（Shooting Stars）：深近黑底。散布 6-10 颗 3×3px 白色圆点，各自用 2-3s ease-in-out 无限循环：opacity 从 0 到 1 再到 0 并伴随 scale .4→1.2，同时向左下位移约 22px。其中 3-4 颗加 ::after 拖尾（宽 64px、高 1px 的白色到透明渐变，rotate(-42deg)，transform-origin:left）。每颗用不同的 animation-delay 打散节奏，避免同时闪烁。

Shooting Stars: deep near-black background. Scatter 6-10 white 3×3px dots, each looping with 2-3s ease-in-out, infinite: opacity goes 0 to 1 and back to 0 with scale .4→1.2, while moving about 22px toward the bottom-left. Give 3-4 of them an ::after tail (64px wide, 1px tall, white-to-transparent gradient, rotate(-42deg), transform-origin:left). Use a different animation-delay on each to break up the rhythm and avoid simultaneous twinkling.

常见搭配

同一页面里经常和「流星划过」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

居中英雄区Centered Hero 数字滚动计数Odometer / Count-up Animation 巨号展示标题Display Heading

演示 HTML 结构

<div class="m-shoot">
  <i style="left:16%;top:20%;animation-delay:0s"></i>
  <i style="left:34%;top:52%;animation-delay:.5s"></i>
  <i style="left:52%;top:28%;animation-delay:1.1s"></i>
  <i style="left:68%;top:64%;animation-delay:.3s"></i>
  <i style="left:82%;top:34%;animation-delay:1.5s"></i>
  <i style="left:26%;top:74%;animation-delay:1.9s"></i>
  <div class="m-shoot__t">Shooting Stars</div>
</div>