当前位置：首页 > CSS

css爱心制作

2026-02-27 05:35:29CSS

CSS爱心制作方法

使用CSS创建爱心形状可以通过伪元素和transform属性实现。以下是两种常见的实现方式：

css爱心制作

基础爱心形状

通过旋转两个正方形并拼接形成爱心：

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

动画爱心效果

添加跳动动画效果：

.beating-heart {
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(-45deg);
  background-color: #ff4757;
  animation: beat 1s infinite;
}

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

.beating-heart::before {
  top: -25px;
}

.beating-heart::after {
  left: 25px;
}

@keyframes beat {
  0% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(1.2); }
  100% { transform: rotate(-45deg) scale(1); }
}

使用clip-path创建爱心

更现代的实现方式：

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

这些方法都可以通过调整尺寸、颜色和动画参数来自定义爱心样式。clip-path方法需要浏览器支持CSS Path功能，但能创建更精确的爱心形状。