用::before和::after画两个正圆并让主元素旋转-45deg是最轻量、兼容性最好、易调准的心形方案；单div加border-radius无法精准拼合，伪元素需等尺寸、精调translate与rotate以严丝合缝。
直接用 ::before 和 ::after 画两个正圆，再配合主元素旋转 -45deg，是最轻量、兼容性最好、也最容易调准的方案。别碰单 div + clip-path 或贝塞尔曲线——那些在 IE11、旧版 Safari 里根本不动，而且缩放时边缘发虚。
为什么必须用两个伪元素，而不是一个 div 加 border-radius？
因为单个块级元素加 border-radius: 50% 只能得到圆或椭圆；加非对称圆角（比如 border-radius: 50% 50% 0 50%）再旋转，看似能“弯出心形”，但实际拼接处会露白边、尖角不锐、上下不对称。两个独立伪元素才能各自控制位置和旋转轴，让左右瓣真正“合拢”。
-
::before和::after必须尺寸相等（如width: 100px; height: 100px），否则旋转后一瓣大一瓣小 - 不能只靠
top/left定位，必须搭配transform: translate()微调——否则旋转中心偏移，心尖错位 - 主元素本身要设
position: relative，否则伪元素的position: absolute会相对于 body 定位，一动全乱
关键参数怎么配才不露白边、不出裂口？
心形最常崩在顶部交汇点：两瓣没对齐，中间留缝；或者重叠太厚，尖角变钝。核心是三个数值联动：width、translate X 偏移量、rotate 角度。
- 推荐基础尺寸：主容器
width: 100px; height: 90px（稍扁利于压出尖角） -
::before：设top: -50px; left: 0;，再加transform: translate(0, -10px) -
::after：设top: -50px; left: 50px;，再加transform: translate(0, -10px) - 主元素统一加
transform: rotate(-45deg)，别用45deg——方向反了心就倒着长
动画跳动时变形、抖动怎么办？
纯 CSS 跳动爱心卡顿或拉伸，90% 是因为没锁死 transform-origin 或 scale 不均匀。心形不是球，不能随便 scale(1.2) 就完事。
- 动画必须作用在主元素上，不是伪元素——否则两瓣不同步
-
transform-origin必须设为center，否则缩放时绕角旋转，心尖甩出去 - 用
scale(1.1)而不是scale(1.1, 1.2)，Y 轴拉伸会把心拉成水滴 - 缓动函数选
cubic-bezier(.25,.95,.41,.99)，比ease-in-out更接近真实心跳节奏
真正难的不是画出心形，而是让两个伪元素在不同缩放比例、不同浏览器下始终严丝合缝地咬合。哪怕 translate 差 1px，心尖就会开裂；rotate 差 0.5deg，左右瓣就显胖瘦。调的时候建议先关掉动画，用 DevTools 拖动 transform 值实时看拼接效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
