css心形制作

使用CSS制作心形

通过CSS的伪元素和transform属性可以轻松实现心形效果。以下是两种常见方法：

基础心形（单个元素+伪元素）

.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%;
}

动画心形（带跳动效果）

.heart {
  width: 100px;
  height: 90px;
  position: relative;
  animation: pulse 1s infinite;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #ff0000;
  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%;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

使用CSS clip-path制作心形

现代CSS的clip-path属性可以更简洁地实现复杂形状：

.heart {
  width: 100px;
  height: 100px;
  background-color: 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实现心形（CSS可控制样式）

结合SVG和CSS控制：

<svg class="heart-svg" viewBox="0 0 100 100">
  <path 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>

.heart-svg {
  width: 100px;
  height: 100px;
}
.heart-svg path {
  fill: red;
  transition: fill 0.3s;
}
.heart-svg:hover path {
  fill: #ff5252;
}

渐变色彩心形

通过CSS渐变增强视觉效果：

.heart-gradient {
  width: 100px;
  height: 90px;
  position: relative;
}
.heart-gradient::before, 
.heart-gradient::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: linear-gradient(to bottom, #ff0861, #ff6b6b);
  border-radius: 50px 50px 0 0;
}
/* 旋转部分与基础示例相同 */

每种方法适用于不同场景，伪元素方案兼容性较好，clip-path方案代码更简洁，SVG方案则更适合需要复杂交互的场景。