MICRO-INTERACTION
点赞心动Like / Heart Pop
点赞瞬间心形填充并做心跳式缩放，同时外圈扩散一道光环。让「喜欢」这个动作有情绪重量。
效果预览
适合用在哪
内容点赞、收藏、关注按钮。社交与内容类产品的标配。
容易踩的坑
- 点赞后等服务端返回才变色，延迟超过 300ms 会让人以为没点上。
- 取消点赞也播放心跳动画，用户分不清当前到底是哪种状态。
- 按钮 46px 但可点击区域只有心形图标，移动端经常点不中。
设计提示词 · Prompt
点赞心动（Like Pop）：按钮是 46px 圆形、浅红底、红色描边心形。点击后给按钮加 .is-on：心形 svg 从 stroke-only 变成 fill 填满，并播放 1.4s cubic-bezier(.2,1.6,.4,1) 的心跳序列 scale 1 → 1.45 → .92 → 1.12 → 1。同时按钮 ::after 画一个 1.5px 的浅红光环，动画从 scale(.72) opacity:.85 扩散到 scale(1.34) opacity:0。右侧数字同步 +1，可用 count-up 补间或直接切换。无障碍上把它做成 <button role="switch" aria-pressed>，而不是纯图标。
Like Pop: the button is a 46px circle with a light red background and a red outlined heart. On click, add .is-on to the button: the heart svg changes from stroke-only to fully filled and plays a 1.4s cubic-bezier(.2,1.6,.4,1) heartbeat sequence scale 1 → 1.45 → .92 → 1.12 → 1. Meanwhile the button's ::after draws a 1.5px light red halo that spreads from scale(.72) opacity:.85 to scale(1.34) opacity:0. The count on the right increments by 1 in sync, via a count-up tween or a direct switch. For accessibility, make it a <button role="switch" aria-pressed> rather than a bare icon.
常见搭配
同一页面里经常和「点赞心动」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-like">
<div class="mi-like__b is-on">
<svg viewBox="0 0 24 24"><path d="M12 20.5 4.2 12.9A4.8 4.8 0 0 1 12 6.4a4.8 4.8 0 0 1 7.8 6.5z"/></svg>
</div>
<span class="mi-like__n">1,284</span>
</div>
</div>