心跳动画 | wjs-css-effects

粉色心跳

渐变心跳

光晕心跳

圆点心跳

关键点

心跳动画通过 scale 缩放模拟心脏"扑通扑通"的跳动节奏
关键帧设置多段 scale 值，模拟真实心跳的"收缩-舒张-轻微回弹"节律
使用 cubic-bezier 自定义缓动曲线，让缩放更有弹性和力度感
可配合 box-shadow 或 opacity 同步变化，增强跳动的视觉冲击
心跳周期约 0.8-1.2s 接近真实心率，太快会显得焦虑，太慢则拖沓

效果说明

模拟真实心跳节奏的缩放动画。通过多段 @keyframes 关键帧控制，实现两次快跳 + 停顿的真实心跳节奏。心形用 CSS 盒子 + 两个圆形伪元素组合绘制。这里展示 4 种变体：粉色心跳、渐变心跳、光晕心跳、圆点心跳。