css怎么制作心

2026-03-12 04:20:25CSS

使用CSS制作心形

通过CSS的伪元素和transform属性可以创建心形。以下是一种常见的方法：

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

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transform: rotate(45deg);
}

.heart::before,
.heart::after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: -50px;
}

使用CSS动画让心形跳动

可以为心形添加动画效果：

@keyframes heartbeat {
  0% { transform: rotate(45deg) scale(1); }
  25% { transform: rotate(45deg) scale(1.1); }
  50% { transform: rotate(45deg) scale(1); }
  75% { transform: rotate(45deg) scale(1.1); }
  100% { transform: rotate(45deg) scale(1); }
}

.heart {
  animation: heartbeat 1s infinite;
}

使用SVG创建心形

另一种方法是使用SVG：

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M50,30
           A20,20 0 0,1 70,50
           A20,20 0 0,1 50,70
           A20,20 0 0,1 30,50
           A20,20 0 0,1 50,30"
        fill="red"/>
</svg>

使用CSS clip-path创建心形

现代CSS还支持clip-path属性：

css怎么制作心

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: path('M50,30
                  A20,20 0 0,1 70,50
                  A20,20 0 0,1 50,70
                  A20,20 0 0,1 30,50
                  A20,20 0 0,1 50,30');
}

每种方法各有优缺点，纯CSS方法兼容性较好，SVG方法更精确，clip-path方法代码更简洁。

标签: css