最省事的是clip-path: path()画心形，现代浏览器支持好但旧版safari和ie不兼容；稳妥方案是伪元素+border-radius+rotate()，兼容ie9；动画需设transform-origin:center并加缓动曲线；svg适合高清与交互场景。
用 clip-path 画心形最省事，但兼容性有坑
现代浏览器（Chrome 104+、Firefox 112+、Safari 16.4+）支持用 clip-path: path() 直接描点画心形，代码短、形状准：
heart {
width: 100px;
height: 100px;
background: #e74c3c;
clip-path: path('M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z');
}但 Safari 15.6 及更早版本不支持 path()，IE 完全不支持。如果需兼容旧版 Safari 或要 fallback，得换方案。用两个旋转的 ::before 和 ::after 是最稳的老办法
这个方案基于伪元素 + border-radius + transform: rotate()，兼容到 IE9，且 CSS 简洁可控：
.heart {
position: relative;
width: 100px;
height: 100px;
}
.heart::before,
.heart::after {
content: '';
position: absolute;
width: 50px;
height: 80px;
background: #e74c3c;
border-radius: 50px 50px 0 0;
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
}
.heart::after {
left: 0;
transform: rotate(45deg);
}注意三点：- 两个伪元素宽度之和应等于容器宽，否则中间留缝
-
border-radius值太大（如100px）会让顶部变平，推荐设为宽度的 1–1.2 倍 - 旋转角度必须严格对称（±45deg），否则左右不对称
跳动动画别只用 scale，加 transform-origin 才自然
单纯 scale(1.2) 会让心形向右下“漂移”，因为默认以左上角为缩放原点。正确做法是把原点移到中心，并配合缓动曲线：
@keyframes beat {
0% { transform: scale(1) translateZ(0); }
50% { transform: scale(1.3) translateZ(0); }
100% { transform: scale(1) translateZ(0); }
}
.heart {
animation: beat 0.8s ease-in-out infinite;
transform-origin: center; /* 关键！ */
}另外：- 加
translateZ(0)能触发硬件加速，避免动画卡顿 - 动画时长建议在 0.6–0.9s 之间；太短像抽搐，太长失去“心跳感”
- 若同时有多个心形，可给每个加不同
animation-delay错开节奏
SVG 方案适合需要高清或动态颜色的场景
如果心形要响应鼠标悬停变色、或导出为高清图（比如打印/海报），SVG 是更可靠的选择：
<svg class="heart-svg" viewbox="0 0 100 100"><path d="M50,10 C30,10 10,30 10,50 C10,70 30,90 50,90 C70,90 90,70 90,50 C90,30 70,10 50,10 Z" fill="#e74c3c"></path></svg>然后用 CSS 控制动画：
.heart-svg path {
animation: beat 0.8s ease-in-out infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}注意：transform-box: fill-box 是让 SVG 元素的 transform 原点真正按路径中心计算，否则可能偏移。心形本身不难，但“看起来像心跳”取决于三个细节：缩放原点是否居中、动画曲线是否带缓入缓出、以及不同设备上形状是否一致——尤其是 Safari 对 clip-path 的支持断层，很容易上线后才发现心形变成方块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
