css桃心制作

使用CSS制作桃心

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

方法一：利用两个矩形旋转拼接

HTML结构只需一个空元素：

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

CSS代码：

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

方法二：使用clip-path直接绘制

更简洁的现代方案：

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

添加动画效果

让桃心跳动：

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

浏览器兼容性提示

• 方法二需要现代浏览器支持
• 旧版浏览器可添加前缀：

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);