css心形制作

CSS 心形制作方法

方法一：使用伪元素和旋转

通过两个圆形和一个正方形组合，利用 ::before 和 ::after 伪元素旋转形成心形。

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}
.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

方法二：使用 clip-path 裁剪

通过 clip-path 直接裁剪出心形路径，代码更简洁。

.heart {
  width: 100px;
  height: 100px;
  background: red;
  clip-path: path(
    "M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"
  );
}

方法三：使用 SVG 嵌入

结合 SVG 路径实现心形，兼容性更好。

.heart {
  width: 100px;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="red" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"/></svg>');
}

方法四：动画效果

为心形添加跳动动画，增强视觉效果。

@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.heart {
  animation: heartbeat 1s infinite;
}

注意事项

• 伪元素方法需注意 transform-origin 的调整。
• clip-path 的路径可能需要工具辅助生成。
• SVG 方法适合需要复杂交互的场景。