css心形制作

CSS心形制作方法

使用CSS创建心形可以通过伪元素、旋转和变形实现。以下是两种常见方法：

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

<div class="heart"></div>

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin: 50px auto;
}

.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

.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"
  );
}

动画效果增强

添加心跳动画：

@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;
}

注意事项

• 调整width/height值可改变心形大小
• 修改background-color可改变颜色
• clip-path方法需要现代浏览器支持
• 伪元素方法兼容性更好