MOTION EFFECT
点击星火Click Spark
点击位置向外迸发一圈小粒子。ReactBits 的 ClickSpark 把「点击被收到」这件事从颜色变化升级成了事件感。
效果预览
适合用在哪
点赞/收藏按钮、游戏化交互、需要强反馈的移动端操作。桌面端建议只在关键动作上开启。
容易踩的坑
- 动画结束后未移除粒子节点，连续点击会让 DOM 无限增长。
- 所有按钮都加星火，反馈失去意义并让界面显得浮躁。
- 粒子容器未设 pointer-events:none，会拦截紧接着的第二次点击。
设计提示词 · Prompt
点击星火（Click Spark）：容器 position:relative。中心一个 6×6px 主色圆点表示点击位置；围绕它放 8 个 2.5×2.5px 的粒子，每个用 CSS 变量 --tx/--ty 指定方向（如 (34px,-22px)、(0,-40px)、(-34px,-22px) 等 8 个方向均匀分布），初始都居中。粒子动画 1.8s ease-out 无限循环：从 translate(0,0) scale(1) opacity:1 到 translate(var(--tx), var(--ty)) scale(.2) opacity:0。真实实现里用 JS 在 click 时动态生成这组粒子并在动画结束后移除。
Click Spark: the container is position:relative. A 6×6px primary-color dot in the center marks the click position; around it place 8 particles of 2.5×2.5px, each using CSS variables --tx/--ty to set its direction (e.g. (34px,-22px), (0,-40px), (-34px,-22px), etc., 8 directions evenly distributed), all starting at the center. Particles animate 1.8s ease-out, infinite: from translate(0,0) scale(1) opacity:1 to translate(var(--tx), var(--ty)) scale(.2) opacity:0. In a real implementation, JS generates this set of particles dynamically on click and removes them after the animation ends.
常见搭配
同一页面里经常和「点击星火」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-cspark">
<div class="m-cspark__ctr">
<i style="--tx:36px;--ty:0"></i>
<i style="--tx:25px;--ty:25px"></i>
<i style="--tx:0;--ty:36px"></i>
<i style="--tx:-25px;--ty:25px"></i>
<i style="--tx:-36px;--ty:0"></i>
<i style="--tx:-25px;--ty:-25px"></i>
<i style="--tx:0;--ty:-36px"></i>
<i style="--tx:25px;--ty:-25px"></i>
</div>
<span>Click Spark · 点击星火</span>
</div>
</div>