css红心制作

CSS红心制作方法

使用CSS制作红心可以通过伪元素和变形属性实现，以下是两种常见方法：

方法一：使用旋转和伪元素

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

.heart::before,
.heart::after {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  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'
  );
}

动画效果增强

为红心添加跳动动画：

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

响应式调整

通过CSS变量控制红心大小：

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

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

这些方法均可在HTML中通过<div class="heart"></div>调用，可根据需要调整颜色、大小和动画参数。clip-path方法需要现代浏览器支持，旋转伪元素方法具有更好的兼容性。