最稳妥的点赞动画应优先用CSS实现，JS仅负责状态切换；爱心“炸开”需动态创建带随机偏移的fixed定位元素，推荐SVG path；高频场景须手动remove()防内存泄漏；checkbox+label方案更可靠且无障碍友好。
直接用 CSS 实现最稳妥，别一上来就写 JS —— 90% 的点赞动画需求，classList.toggle() 配合 @keyframes 就够了，JS 只负责状态切换，动画交给 CSS。
怎么让爱心点击后“炸开”再消失？
这不是纯 CSS 能搞定的，必须动态创建元素。核心是：每次点击生成一个 div，设 position: fixed，用 e.clientX / e.clientY 定位，加随机偏移防重叠。
- 心形不能用
background-image或伪元素硬塞——它们无法独立做位移+旋转+缩放三重动画 - 推荐用 SVG
<path>内联写死在模板里，或用data-uribase64 编码成背景，减少请求 - 动画时长控制在
1.2s–1.5s，太短像抽搐，太长用户会误以为卡了 - 动画结束必须手动
remove()节点，否则内存泄漏——尤其在高频点赞场景下
为什么用 checkbox + label 做收藏状态比 JS 切类更可靠？
因为不用监听事件、不操心异步时序、不处理重复点击，且天然支持键盘 Space 触发，无障碍友好。
- 隐藏
<input type="checkbox" id="like">，用<label for="like">包裹 SVG 爱心 - CSS 里写
input#like:checked ~ .heart { animation: heart-pulse 2s infinite; }，其中heart-pulse是微幅缩放（scale(1.02)），不是猛跳 - 千万别用
:active模拟点击态——它只在鼠标按下瞬间生效，松手就消失，根本存不住“已点赞”状态 - Safari 对
animation-play-state: paused支持差，想暂停脉动动画？改用opacity: 0.8降权视觉反馈更安全
transform: rotate() 拼爱心时为啥总歪？
两个伪元素 ::before 和 ::after 的 border-radius 和 transform-origin 必须严格对齐，差 1px 就心形错位。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
font-size: 0防止行内元素默认间隙干扰布局 -
::before用border-radius: 100% 100% 0 0+transform: rotate(-45deg)，::after用border-radius: 100% 100% 0 0+transform: rotate(45deg) - 两者
transform-origin都得设成center，否则旋转中心偏移，拼不出对称心形 - 如果要适配深色模式，别只改
fill，记得同步调整stroke和阴影颜色，否则边缘发虚
最易被忽略的是响应式断点下的动画节奏——手机屏幕小，scale(1.3) 猛一下可能遮住按钮文字；PC 上又显得太轻。建议用 prefers-reduced-motion 媒体查询兜底，动画该停就停，别强塞。
