SVG心跳爱心扩散动画通过描边动画（stroke-dasharray/dashoffset）绘制爱心路径，结合三段式CSS缩放、透明度与旋转实现“停顿→猛跳→回弹”节奏，并用多层延迟动画营造涟漪扩散效果。
在 H5 页面中用 SVG 路径实现“心跳爱心扩散动画”，核心是结合 SVG 路径描边动画（stroke-dasharray + stroke-dashoffset） 与 缩放+透明度变化的 CSS 动画，模拟心跳节奏：先收缩（静默），再突然放大+发光+跳动，同时爱心轮廓由内而外“绘制”出来，营造“为你心动”的视觉张力。
1. 用 SVG 路径画一个简洁爱心
避免使用复杂贝塞尔曲线，推荐用 <path d="M20,40 A20,20 0 0,1 60,40 A20,20 0 0,1 80,80 L50,110 L20,80 Z"> 这类对称路径——它闭合、居中、适配动画。关键点：
- 设置
fill="none"，只保留描边（stroke="#ff2a6d"），后续靠描边动画“画出”爱心 - 添加
stroke-width="2"和stroke-linecap="round"让线条更柔和 - 用
transform="scale(0) translate(0,0)"初始隐藏，为扩散做准备
2. 配置描边动画：从无到有“绘制”爱心
利用 SVG 的 getTotalLength() 获取路径总长，设为 stroke-dasharray 值，再用 stroke-dashoffset 控制起始绘制位置：
- JS 中获取路径：
const path = document.querySelector('#heart-path'); - 计算长度：
const len = path.getTotalLength(); - CSS 设置：
stroke-dasharray: len; stroke-dashoffset: len;→ 此时不可见 - 动画中将
stroke-dashoffset从len变为0，实现“一笔画心”效果
3. 心跳节奏：CSS 关键帧控制缩放+透明+描边偏移
心跳不是匀速——要模拟“停顿→猛跳→回弹”。用单个 @keyframes heartbeat 实现三段式：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
0% { transform: scale(0.8); opacity: 0.7; stroke-dashoffset: len; }-
50% { transform: scale(1.3) rotate(2deg); opacity: 1; stroke-dashoffset: 0; }→ 最大跳动+完成绘制 -
100% { transform: scale(1); opacity: 0.9; }→ 回弹收尾
再用 animation: heartbeat 1.2s ease-in-out infinite 循环播放，配合 animation-delay: -0.3s 错峰启动，让多个爱心扩散不呆板。
4. 扩散效果：叠加多层 SVG 爱心，逐层延迟动画
真正“扩散感”来自分层：1 个主心 + 2~3 个透明度更低、尺寸略大的外圈爱心路径，每层加不同 animation-delay：
- 第 1 层（中心）：
animation-delay: 0s - 第 2 层（微扩散）：
animation-delay: 0.15s - 第 3 层（光晕）：
animation-delay: 0.3s，stroke: rgba(255,42,109,0.3)
所有路径共用同一套 keyframes，仅靠 delay 和样式差异，自然形成“心跳涟漪”扩散感。
不复杂但容易忽略：记得给 SVG 容器加 overflow: visible，否则缩放扩展会被裁剪；移动端需加 transform-style: preserve-3d 防止缩放模糊；爱心颜色建议用渐变色或加 filter: drop-shadow(0 0 12px #ff2a6d) 增强心动光感。
