MOTION EFFECT
流星雨Meteors
多条斜向划过的流星，带 56px 左右的拖尾。Magic UI / Aceternity UI 均有同名组件，是深色首屏的常客。
效果预览
Meteors · 流星雨
适合用在哪
深色首屏背景、等待上线页、宇宙/星空主题的品牌页。数量控制在 6-10 条。
容易踩的坑
- 流星超过 10 条且 delay 相同，会像一阵斜雨而不是零星划过。
- 流星轨迹正好穿过标题区，划过文字时干扰阅读并分散注意力。
- 未关闭不可见区域的动画，页面滚走后仍持续消耗 GPU。
设计提示词 · Prompt
流星雨（Meteors）：容器深色径向渐变底（如 120% 90% at 70% 0%，从深靛蓝到近黑），overflow:hidden。每条流星是一个 2×2px 白色圆点，transform:rotate(215deg)，::after 用宽 56px 高 1px 的横向 linear-gradient（白 75% 到透明）做拖尾。动画从 rotate(215deg) translateX(0) 到 translateX(-260px)，opacity 前 72% 保持 1 再淡出，总时长 3.2s 线性无限循环。用不同的 left 与 animation-delay（间隔 0.3-1s）错开出现节奏。
Meteors: the container has a dark radial-gradient background (e.g. 120% 90% at 70% 0%, from deep indigo to near black) and overflow:hidden. Each meteor is a 2×2px white dot with transform:rotate(215deg); its ::after is a 56px-wide, 1px-tall horizontal linear-gradient (white at 75% to transparent) as the tail. Animate from rotate(215deg) translateX(0) to translateX(-260px), with opacity held at 1 for the first 72% and then fading out, 3.2s linear, infinite. Stagger appearance with different left values and animation-delay (0.3-1s apart).
常见搭配
同一页面里经常和「流星雨」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-meteors"> <i style="left:10%;animation-delay:0s"></i> <i style="left:24%;animation-delay:.45s;animation-duration:3.8s"></i> <i style="left:36%;animation-delay:1.1s"></i> <i style="left:50%;animation-delay:.2s;animation-duration:3.4s"></i> <i style="left:64%;animation-delay:1.5s"></i> <i style="left:76%;animation-delay:.8s;animation-duration:4.1s"></i> <i style="left:88%;animation-delay:1.9s"></i> <div class="m-meteors__t">Meteors · 流星雨</div> </div>