用@keyframes实现ecg心跳动画需模拟qrs陡升、t波缓降节奏，通过clip-path polygon定义5–7点波形路径，0.8s周期配合cubic-bezier增强生理感，并叠加基线抖动、红光呼吸、导联线晃动等细节提升医疗辨识度。
在 H5 页面中，用 @keyframes 实现心跳监测仪风格的脉搏跳动动画，核心是模拟心电图（ECG）波形的“陡升—平台—陡降—小幅回升”节奏，而非简单缩放。关键在于波形形状、时间节奏和视觉反馈的真实感。
1. 画出符合 ECG 特征的关键帧路径
真实心电图 P-QRS-T 波群中，QRS 主波（代表心室除极）最陡、最高，持续约 0.08–0.12s；T 波较缓，略高于基线。动画可用 clip-path 或 SVG <path></path> 配合 transform 模拟，但更轻量的做法是用 CSS clip-path: polygon() 动态改变波形轮廓：
- 定义 5–7 个关键点坐标，例如：
polygon(0% 50%, 20% 50%, 30% 20%, 40% 50%, 60% 50%, 70% 70%, 100% 50%)—— 其中 30% 处下压模拟 R 波尖峰，70% 处微抬模拟 T 波 - 用
@keyframes在 0% → 100% 之间插值这些点，重点控制 R 波段（如 25%–35%）的快速垂直位移，制造“跳动感” - 避免全程匀速：前 30% 时间占整个周期 15%，中间 10% 占 5%（模拟 QRS 瞬间），后 60% 缓慢回落（模拟复极）
2. 控制节奏：模拟真实心率（60–100bpm）
一次完整心跳动画时长应为 0.6s（100bpm）到 1s（60bpm）。建议默认设为 0.8s，并允许 JS 动态调整：
- CSS 中写：
animation: pulse 0.8s ease-in-out infinite; - JS 动态改速：
el.style.animationDuration = `${60 / heartRate}s`;（heartRate 为每分钟次数） - 加
animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1)替代ease-in-out，让上升更急、下降略拖尾，更贴近生理波形
3. 增强真实感的细节处理
纯波形不够“医疗感”，需叠加辅助效果：
-
基线抖动：给容器加轻微
transform: translateY(var(--jitter, 0))，用另一个 keyframes 每 2–3 秒随机偏移 ±0.5px，模拟设备微震 -
颜色呼吸：主波形用红色（#ff3b30），在 R 波峰值处同步触发
box-shadow: 0 0 12px rgba(255, 59, 48, 0.7)并 fade out -
导联线提示：在波形左侧固定画一条细竖线（
::before），顶部加小圆点模拟电极接触点，随主波轻微水平晃动（translateX(sin(t) * 0.3px)）
4. 兼容性与性能提醒
移动端 H5 需注意：
-
clip-path在旧版 iOS Safari（≤15.4）不支持百分比 polygon，可回退为 SVG<animate attributename="d"></animate>路径动画 - 避免同时动画 >3 个元素，把抖动、发光、波形合并进一个
transform层，启用will-change: transform - 心跳暂停时用
animation-play-state: paused，别直接 remove class，否则波形会跳回起点
不需要 canvas 或 JS 绘图，纯 CSS 就能做出有临床辨识度的心跳动画——重点不在“像不像”，而在“有没有让医生一眼认出那是 R 波”。
