MOTION EFFECT
星点闪烁Sparkles
零散分布的星形符号依次放大缩小 + 明暗变化，给深色底加「灵气」。用于点缀标题或卡片角落。
效果预览
✦
✦
✦
✦
✦
✦
✦
✦
Sparkles
适合用在哪
AI 产品标题、上线公告、庆祝氛围的小面积点缀。必须有节制，一屏 8-14 颗。
容易踩的坑
- 星点超过 14 颗或铺满全屏，点缀变成噪点，标题反而不突出。
- 所有星点 delay 相同，会同步闪烁像故障而不是灵气。
- 「✦」字符未加 aria-hidden，读屏会逐个念出这些装饰符号。
设计提示词 · Prompt
星点闪烁（Sparkles）：深色容器内绝对定位散布 8-14 个「✦」字符，字号 9-12px，颜色用浅紫 #c7d2fe。每颗动画 2.1s ease-in-out 无限循环：opacity 从 .12 到 1，transform 从 scale(.5) rotate(0) 到 scale(1.15) rotate(90deg)。用不同 left/top 与 0.2-1.8s 的 animation-delay 打散，让闪烁看起来随机而非同步。
Sparkles: inside a dark container, absolutely position 8-14 "✦" characters, font size 9-12px, colored light purple #c7d2fe. Each animates 2.1s ease-in-out, infinite: opacity from .12 to 1, transform from scale(.5) rotate(0) to scale(1.15) rotate(90deg). Scatter them with different left/top values and animation-delay of 0.2-1.8s so the twinkling looks random rather than synchronized.
常见搭配
同一页面里经常和「星点闪烁」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-sparkles"> <i style="left:14%;top:22%;animation-delay:0s">✦</i> <i style="left:30%;top:64%;animation-delay:.35s">✦</i> <i style="left:44%;top:16%;animation-delay:.7s">✦</i> <i style="left:58%;top:74%;animation-delay:.15s">✦</i> <i style="left:70%;top:30%;animation-delay:1.05s">✦</i> <i style="left:84%;top:58%;animation-delay:.5s">✦</i> <i style="left:22%;top:44%;animation-delay:1.4s">✦</i> <i style="left:78%;top:82%;animation-delay:1.75s">✦</i> <div class="m-sparkles__t">Sparkles</div> </div>