粒子动画需挂载到body下并用requestAnimationFrame驱动，避免DOM泄漏、渲染卡顿与兼容性问题，确保飞散干净流畅。
粒子动画需要脱离文档流才能自由飞散
直接在按钮内部用 ::after 伪元素做粒子会受限于父容器的 overflow 和 transform 原点，导致粒子被裁剪或飞偏。必须把粒子挂载到 body 下，用绝对定位 + getBoundingClientRect() 计算初始位置。
- 不要用
position: relative包裹按钮再让粒子 relative 定位——粒子会随按钮滚动/缩放偏移 - 每次点击前清空已存在的粒子元素，避免 DOM 泄漏：
document.querySelectorAll('.like-particle').forEach(el => el.remove()) - 粒子元素建议用
div而非 SVG，减少渲染开销；尺寸控制在6px–10px，太多太大会卡顿
用 requestAnimationFrame 控制粒子运动更流畅
CSS @keyframes 难以实现随机方向、衰减透明度和渐变缩放，且无法响应点击坐标。JavaScript 驱动的 requestAnimationFrame 是唯一可靠方案。
- 每个粒子保存自己的
vx、vy、opacity、scale，每帧更新：opacity -= 0.02，scale *= 0.96 - 重力可选加，但值要小（如
vy += 0.15），否则像下坠而非迸发 - 生命周期设为
60帧（约 1 秒），超时后remove()，避免 requestAnimationFrame 持续调用
颜色与数量需匹配按钮状态
红色点赞粒子容易和错误提示混淆，尤其在表单场景；粒子数不是越多越好，移动端 12–18 粒子已足够，PC 端上限建议 30。
- 从按钮中心取色：用
window.getComputedStyle(btn).color或预设data-color属性，避免硬编码#ff4757 - 粒子颜色可轻微随机偏移：
hsl(${baseHue}, 90%, 60%)→hsl(${baseHue + (Math.random() - 0.5) * 20}, ...) - 连续快速点击时，限制最小触发间隔（如
lastClickTime + 300ms），否则粒子堆叠成糊状
兼容性关键：避免 transform3d 在 Safari 上闪动
Safari 对 transform: translate3d() + opacity 的合成层处理不稳定，粒子可能突兀消失或跳帧。
立即学习“前端免费学习笔记（深入）”；
- 改用
transform: translate()（2D）+ 强制开启 will-change：will-change: transform, opacity - 不给粒子设
transition，所有变化由 JS 控制，CSS 过渡会和 requestAnimationFrame 冲突 - iOS Safari 下测试时，确保
body无touch-action: none，否则点击事件可能被拦截
粒子动画真正难的不是“怎么飞起来”，而是“怎么飞得干净”——删不干净的 DOM、没清掉的动画帧、没重置的 transform origin，都会在连点几次后让页面悄悄变慢。
