CSS爱心代码制作

2026-04-02 07:14:19CSS

CSS爱心代码制作方法

使用CSS的::before和::after伪元素结合transform旋转和定位实现爱心效果。以下是完整代码示例：

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

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

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

纯CSS渐变爱心

使用径向渐变创建更柔和的爱心效果：

CSS爱心代码制作

.heart {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff0000);
  position: relative;
  transform: rotate(45deg);
  box-shadow: 0 0 50px #ff0000;
}

.heart::before,
.heart::after {
  content: '';
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #ff0000);
  border-radius: 50%;
  position: absolute;
}

响应式爱心

通过vw单位实现响应式尺寸：

.heart {
  width: 10vw;
  height: 10vw;
  /* 其余样式保持不变 */
}

多爱心组合

创建爱心群组效果：

<div class="hearts-container">
  <div class="heart"></div>
  <div class="heart"></div>
  <div class="heart"></div>
</div>

.hearts-container {
  display: flex;
  justify-content: space-around;
}

.heart:nth-child(1) { animation-delay: 0s; }
.heart:nth-child(2) { animation-delay: 0.3s; }
.heart:nth-child(3) { animation-delay: 0.6s; }