优先用SVG，因其动画更可控、颜色可独立控制且兼容性优于::before伪元素；实操建议内联SVG、设明确宽高、用CSS变量适配深色模式，并配合@keyframes实现带回弹的点赞微动效。
心形图标用 svg 还是 ::before 伪元素？
优先用 svg。伪元素在 Safari 旧版和部分安卓 WebView 中对 transform: scale() 动画支持不稳定，且无法独立控制描边/填充色变化；svg 可直接绑定 fill 和 transform，动画更可控。
实操建议：
- 把心形 SVG 内联进 HTML（避免 HTTP 请求延迟），加
class="like-icon" - 不要用字体图标（如 Font Awesome 的
fa-heart），其缩放会受字体渲染干扰，边缘模糊 - 确保 SVG 根元素有明确宽高（如
width="24" height="24"），否则 CSSscale()可能触发重排
transition 和 @keyframes 哪个更适合点赞微动效？
用 @keyframes + animation。Twitter 实际动效不是简单“缩放进→停住”，而是带缓动节奏的“快速缩放 → 微回弹”，单靠 transition 难以表达回弹感。
关键参数说明：
立即学习“前端免费学习笔记（深入）”；
- 动画时长控制在
0.3s左右：短于0.2s显突兀，长于0.4s感觉迟滞 - 使用
cubic-bezier(0.2, 0.8, 0.4, 1)模拟回弹，比ease-out更自然 - 必须加
animation-fill-mode: forwards，否则动画结束后图标会跳回原大小
示例片段：
@keyframes like-pulse {
0% { transform: scale(1); }
70% { transform: scale(1.3); }
100% { transform: scale(1.1); }
}
.like-icon.active {
animation: like-pulse 0.3s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
如何避免连点多次触发重复动画？
CSS 动画本身不防抖，靠 JS 控制类名切换时机是唯一可靠方式。
常见错误现象：用户快速双击，active 类被反复添加/移除，导致动画中断或叠加播放。
实操建议：
- 点击后立即加
active类，并用setTimeout在300ms后移除（与动画时长匹配） - 加状态锁：
if (isAnimating) return;，并在动画结束回调中释放锁（监听animationend事件） - 服务端返回成功后再移除类名更稳妥——但前端需先给即时反馈，所以“先播动画，再校验”是合理折中
深色模式下心形颜色怎么同步适配？
别用固定色值写死 fill="#e0245e。Twitter 心形在深色模式下实际是 #ff6b8b（更亮），浅色模式是 #e0245e（更饱和），靠 CSS 变量 + @media (prefers-color-scheme) 切换最干净。
实操建议：
- 定义两个 CSS 变量：
--like-fill-light: #e0245e;和--like-fill-dark: #ff6b8b; - 在
:root设默认值，在@media (prefers-color-scheme: dark)里覆盖 - SVG 内联写成
fill="var(--like-fill)"，而非硬编码
注意：iOS Safari 对内联 SVG 中的 CSS 变量支持良好，但部分安卓 10 以下 WebView 不支持，如需兼容可降级为 JS 注入 style。
