当前位置：首页 > CSS

爱心制作css

2026-04-01 09:42:36CSS

爱心制作的CSS方法

使用CSS可以轻松创建爱心形状，以下是几种常见的实现方式：

爱心制作css

使用伪元素和transform属性

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

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

使用border-radius和transform

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

动画效果爱心

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

这些方法可以根据需要调整大小、颜色和动画效果，适用于网页设计中的各种场景。