纯CSS画标准爱心最稳方式是用伪元素：主元素旋转-45°作底座，::before和::after画两个相切正圆，宽高相等、border-radius:50%、top/left精确定位；动画需设transform-origin:center、用cubic-bezier缓动、uniform scale避免形变。
CSS 画爱心动画完全不需要 JavaScript，但“纯 CSS 实现跳动效果”容易卡在两个地方：一是爱心形状本身用 border-radius 拼得不对，二是动画节奏没调好导致形变或抖动。
怎么用纯 CSS 画一个标准的爱心
最稳定的方式是用两个相切的圆 + 一个旋转 45° 的正方形（构成心形下半部分），再用 clip-path 或伪元素组合。但兼容性优先选伪元素法：
核心是给一个 <div class="heart"></div> 添加 ::before 和 ::after，分别画左右半圆，再用主元素画倒三角底座。关键参数不能乱调：
-
::before和::after宽高必须相等，border-radius: 50%才能保证是正圆 - 两圆的
top和left偏移要精确到50%，否则错位后心形开口过大 - 主元素的
transform: rotate(-45deg)必须配合width/height比例（推荐width: 0.8em; height: 0.8em）才能压出尖角
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
.heart {
position: relative;
width: 1em;
height: 0.8em;
transform: rotate(-45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background: #e74c3c;
}
.heart::before {
top: 0;
left: 0.2em;
}
.heart::after {
top: 0;
left: 0;
}
为什么 animation: heartbeat 1.2s infinite 会拉伸变形
常见错误是直接对 .heart 应用 scale() 动画，但没重置 transform-origin。爱心中心不在元素几何中心，导致缩放时上下左右偏移不均，看起来像“晃动”或“撕裂”。
正确做法：
- 把
transform-origin显式设为center（不是默认的50% 50%，因为伪元素布局会影响计算） - 动画只作用于主容器，不要给伪元素单独加
transform - 用
scale(1.1)而非scale(1, 1.2)——非均匀缩放必然导致心形扁宽失真 - 缓动函数必须用
cubic-bezier(0.22, 0.61, 0.36, 1)模拟心跳“快起慢落”的生理节奏，用ease-in-out会显得机械
IE 和 Safari 里爱心显示为空白或错位
根本原因是 ::before/::after 在某些旧版浏览器中不继承父元素的 transform，且 transform: rotate(-45deg) 在 Safari 低版本需加 -webkit- 前缀。
兼容方案：
- 主容器不用
transform旋转，改用clip-path: polygon(...)构建心形（但 IE 完全不支持） - 更稳妥的是放弃伪元素，改用 SVG 内联：
<svg viewBox="0 0 100 100"><path d="M50,30 C30,30 15,45 15,65 C15,85 30,100 50,100 C70,100 85,85 85,65 C85,45 70,30 50,30 Z" /></svg>，然后对整个<svg>做scale动画 - 若坚持用 CSS，必须加
-webkit-transform: rotate(-45deg)并测试 iOS 12+ 和 Safari 13.1+
真正麻烦的不是画出来，而是让每一次缩放都落在视觉重心上——多试三次 transform-origin 值，比查十篇教程管用。
