css红心制作

2026-01-28 11:31:47CSS

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

添加动画效果

可以为红心添加跳动动画效果：

@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 clip-path属性的方法：

.heart-alt {
  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');
}

响应式红心设计

使用vw单位使红心大小随视口宽度变化：

.heart-responsive {
  width: 10vw;
  height: 10vw;
  /* 其余样式与第一个示例相同 */
}

渐变颜色红心

为红心添加渐变效果：

css红心制作

.heart-gradient {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}

.heart-gradient::before,
.heart-gradient::after {
  background: linear-gradient(135deg, #ff0000, #cc0000);
}

这些方法提供了从基础到进阶的CSS红心实现方案，可以根据需要选择或组合使用。