纯CSS心形最稳方案是用::before和::after伪元素各建一个正方形，border-radius设为50% 50% 0 50%和50% 50% 50% 0，再分别rotate(-45deg) translate(-10px,-10px)与rotate(45deg) translate(10px,-10px)，transform-origin:center，配合弹性跳动动画。
用 ::before 和 ::after 画心形的关键结构
纯 CSS 心形最稳的方案就是两个带圆角的矩形，斜着旋转后拼成心尖和心瓣。核心不是“画曲线”，而是靠 border-radius + transform: rotate() 让直角矩形视觉上“弯”出弧度。
必须用伪元素，因为需要两个独立可旋转的块；主元素只负责定位和动画容器作用。
常见错误是直接给主元素加 border-radius 或试图用单个 div 实现——那只会得到一个椭圆或胶囊，不是标准心形。
-
width和height要相等（比如20px），否则旋转后两瓣不对称 -
border-radius必须设为50% 50% 0 50%（::before）和50% 50% 50% 0（::after），顺序不能错，否则半圆角方向反了 - 两个伪元素初始位置都用
top: 0; left: 0;，再靠transform平移+旋转，别用margin或top/left微调，会破坏旋转中心
让两瓣“合拢”成心形的旋转与位移参数
两瓣不是对称旋转，而是镜像错开：左瓣顺时针转 -45deg，右瓣逆时针转 45deg，再各自横向偏移一点，才能在顶部交汇出心尖。
如果只旋转不平移，它们会绕自身中心转，根本碰不到一起；如果平移量不对，心尖会裂开或重叠过厚。
-
::before：用transform: rotate(-45deg) translate(-10px, -10px) -
::after：用transform: rotate(45deg) translate(10px, -10px) - 这里的
10px是经验值，和宽高相关；若width: 24px，就改用12px，保持比例 - 必须把
transform-origin设为center，否则旋转轴偏移，拼接错位
跳动动画怎么写才不抽搐
“跳动”不是简单缩放，而是模拟心脏收缩-舒张：先快速放大（收缩），再稍慢回弹（舒张），并带一点上下浮动增强真实感。
直接用 scale(1.2) → scale(1) 会显得僵硬；漏掉 transform-origin: center 会导致整个心形乱飘；没设 animation-fill-mode: forwards 就会闪回原形。
- 动画关键帧里，第一帧
transform: scale(1) translateY(0)，第二帧transform: scale(1.3) translateY(-4px)，第三帧transform: scale(1.05) translateY(1px)，最后一帧回到scale(1) translateY(0) - 动画时长建议
0.6s，缓动用cubic-bezier(0.22, 0.61, 0.36, 1)（类似 iOS 弹性回弹） - 务必给父容器加
overflow: hidden，否则旋转时伪元素边缘可能溢出显示锯齿
IE 和旧版 Safari 的兼容性坑
IE 完全不支持 transform 在伪元素上的应用；Safari 12 以下对 transform-origin + 伪元素组合有渲染 bug，心瓣会错位。
不是加前缀就能解决，是底层不支持。真要兼容，就得放弃伪元素方案，改用 SVG 或 PNG。
立即学习“前端免费学习笔记（深入）”；
- 现代项目可放心用，但上线前必须在真机 Safari 13+、Chrome 80+、Firefox 75+ 测一遍旋转是否同步
- 别用
will-change: transform强制硬件加速——在低端安卓机上反而导致跳动卡顿或闪烁 - 如果心形要响应点击，记得给主元素加
cursor: pointer，伪元素默认不触发事件
心形看着简单，但旋转中心、圆角方向、平移量、动画节奏四者必须咬死匹配，差一点就变成歪嘴、断尖、抖动或者静止不动。调的时候盯着心尖交汇点看，比看整体更准。
