纯CSS可实现心跳动画：用::before和::after伪元素拼爱心，配合@keyframes定义缩放、旋转与阴影变化，设置transform-origin:center和cubic-bezier缓动，时长0.6s更贴近真实心跳。

用 CSS 实现爱心跳动动画，别碰 JavaScript

纯 HTML + CSS 就能做出收藏按钮的“心跳”效果，JavaScript 完全没必要介入。关键不是加个 animation 就完事，而是要让缩放、颜色、阴影变化同步协调，否则会显得生硬或卡顿。

常见错误是只做 transform: scale(1.2)，没配缓动函数和时长，结果一弹一弹像抽搐；或者忘了加 transform-origin: center，爱心跳着跳着偏移了位置。

• 用 @keyframes heart-beat 定义 0% → 25% → 50% → 100% 四段变化，避免线性缩放
• 动画时长设为 0.6s，比默认的 1s 更贴近真实心跳节奏
• 必须写 transform-origin: center，否则 SVG 或 inline-block 爱心会位移
• 配合 box-shadow 模拟“充血感”：从 0 0 0 rgba(239, 68, 68, 0) 到 0 0 20px rgba(239, 68, 68, 0.4)

SVG 爱心比 Unicode 字符更可控

♥ 或 ❤ 这类 Unicode 爱心在不同系统/字体下渲染不一致，iOS 可能发灰，Windows 可能锯齿，且无法单独控制描边、填充或 hover 响应区域。SVG 是唯一靠谱选择。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

一个最小可用的 SVG 爱心：

<svg class="heart" viewBox="0 0 24 24">
  &lt:path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

• 用 viewBox 而非固定宽高，确保响应式缩放不失真
• <path> 比 <symbol> 或 <use> 更轻量，适合单个按钮
• hover 触发动画时，直接给 .heart 加 animation: heart-beat 0.6s ease-in-out，不要用 JS toggle class

点击收藏后保持“已激活”状态的动画逻辑

用户点一次收藏，爱心应该从灰色变红，并持续轻微脉动（不是反复猛跳），再点一次才恢复静止。这个状态切换不能靠 :active，得用 :checked 配合隐藏 checkbox，或用 data-active 属性 + CSS 属性选择器。

立即学习“前端免费学习笔记（深入）”；

• 推荐方案：用隐藏 <input type="checkbox" id="fav"> + <label for="fav"> 包裹 SVG，完全免 JS
• CSS 中写 input#fav:checked ~ .heart { animation: heart-pulse 2s infinite; }，其中 heart-pulse 是幅度更小（scale(1.03)）、频率更低（2s）的循环动画
• 避免用 animation-play-state: paused 控制暂停——它在 Safari 上有兼容问题
• 如果必须用 JS，只负责 toggle data-active="true"，所有样式逻辑留在 CSS 里

移动端点击区域小、响应延迟怎么办

iOS Safari 对小于 44×44px 的可点击元素有 300ms 延迟，且默认 :active 伪类不触发。直接放大 SVG 或用 padding 扩展点击区，但别用 transform: scale()，那只会放大图形，不扩大热区。

• 给 .heart 外层 <label> 设 min-width: 44px; min-height: 44px;，并加 display: inline-flex; align-items: center; justify-content: center;
• 加 touch-action: manipulation 消除 300ms 延迟
• 用 cursor: pointer 和 user-select: none 提升交互反馈感
• 别依赖 :active 改变颜色或大小——它在 iOS 上不可靠；改用 input:checked ~ .heart 或 JS 的 click 事件

实际项目里最容易被忽略的是动画触发时机和状态持久化：用户刷新页面后，收藏状态丢了，但动画还在跳；或者连点两次导致动画队列堆积，出现卡顿。这些都得靠服务端状态 + 合理的 DOM 属性标记来兜底，CSS 动画本身只是视觉表达层。