当前位置：首页 > CSS

爱心制作css

2026-02-27 09:56:42CSS

使用CSS创建爱心形状

通过CSS的伪元素和transform属性可以绘制一个爱心形状。以下是实现代码：

.heart {
  width: 100px;
  height: 90px;
  position: relative;
  margin: 50px auto;
}

.heart:before, .heart:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}

.heart:before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

添加动画效果

为爱心添加跳动动画效果：

爱心制作css

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

使用SVG创建爱心

另一种方法是使用内联SVG：

爱心制作css

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

响应式爱心设计

使爱心随屏幕大小调整：

.heart {
  width: 10vw;
  height: 9vw;
  max-width: 150px;
  max-height: 135px;
}

多颜色爱心组

创建多个不同颜色的爱心：

.heart.red { background: #ff0000; }
.heart.pink { background: #ff69b4; }
.heart.purple { background: #9b30ff; }

/* HTML结构 */
<div class="heart red"></div>
<div class="heart pink"></div>
<div class="heart purple"></div>

这些方法提供了从简单到进阶的爱心实现方案，可根据项目需求选择合适的方式。CSS方法适合轻量级实现，SVG则提供更精确的控制，而响应式设计确保在不同设备上都能正常显示。