纯CSS无法实现点击爆裂粒子效果，必须用JavaScript动态创建5–12个粒子并注入随机位移、旋转等CSS变量，配合translate3d/rotate/scale动画与opacity渐变，起点为心形中心，通过节流和pointer-events控制连点。
心形图标如何用纯CSS实现点击爆裂粒子效果
纯CSS无法生成动态粒子——所谓“爆裂粒子”必须借助JavaScript控制元素数量、位置和动画，CSS只负责定义单个粒子的样式和飞散动画。常见错误是试图用@keyframes硬编码10个以上div做固定轨迹，结果粒子僵硬、无随机性、无法响应点击位置。
正确做法：用JS动态创建5–12个.particle元素，每个赋予随机旋转、缩放、位移和透明度，并复用同一段CSS动画；心形本身用::before/::after伪元素绘制，避免额外DOM节点。
- 心形结构推荐用
width/height均为0的div+ 两个圆形伪元素，比SVG更易配合CSS动画 - 粒子元素必须设
position: fixed或position: absolute并脱离文档流，否则会撑开布局 - 每个粒子的
animation-duration应在0.4s–0.7s间随机，避免所有粒子同步消失
粒子飞散动画的关键CSS参数怎么配
飞散不是靠transform: translateX/Y线性位移，而是组合translate3d（触发GPU加速）、rotate（模拟旋转飞出）和scale（模拟碎裂感）。透明度渐变必须用opacity而非rgba()，否则IE/旧Edge不兼容。
核心动画片段如下：
立即学习“前端免费学习笔记（深入）”；
@keyframes particle-burst {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
}
100% {
opacity: 0;
transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)) scale(0.2);
}
}
注意：--tx/--ty和--rot是CSS自定义属性，需由JS注入具体值，不能写死。若直接写translate3d(80px, -60px, 0)，所有粒子轨迹就完全一致。
点击坐标如何映射到粒子起始位置
粒子必须从心形中心炸开，而不是从鼠标点击点——用户常误以为“点击哪就从哪炸”，实际体验中，从图标中心爆发更符合视觉预期，且避免心形边缘点击时粒子一半飞出屏幕。
- 用
getBoundingClientRect()获取心形容器的中心坐标：left + width / 2、top + height / 2 - 粒子
left/top设为该中心值，再用transform: translate(-50%, -50%)居中自身，确保起点精准 - 若心形用
svg或background-image实现，需额外计算内边距和尺寸比例，不如纯CSS心形可控
移动端点击穿透和连点问题怎么防
快速连点会导致粒子堆叠、内存泄漏甚至卡顿。单纯加pointer-events: none在动画中不可靠——iOS Safari存在事件冒泡延迟，可能漏掉第二次点击。
可靠方案是JS层节流 + CSS状态标记：
- 给心形容器加临时class如
is-bursting，CSS中设.heart.is-bursting { pointer-events: none; } - JS中用
setTimeout在动画总时长（如700ms）后移除该class，比监听animationend更稳（后者在动画被强制中断时可能不触发） - 避免用
preventDefault()，它会阻止部分Android设备的原生点击反馈
真正难的是让每个粒子的物理感真实：速度衰减要用cubic-bezier(.2, .8, .3, 1)而非ease-out，旋转方向要区分顺/逆时针，这些细节不写死在CSS里，就得靠JS动态算——但多数人只停在“能动起来”这一步。
