css红心制作

红心制作方法

使用纯CSS绘制红心

通过CSS的::before和::after伪元素结合transform旋转可创建红心形状：

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

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

SVG实现方案

使用SVG内联更灵活：

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

响应式调整

通过CSS变量控制大小：

:root {
  --heart-size: 100px;
}

.heart {
  width: var(--heart-size);
  height: var(--heart-size);
}