当前位置：首页 > CSS

css桃心制作

2026-03-12 12:08:53CSS

使用CSS制作桃心效果

通过CSS的伪元素和transform属性可以轻松实现桃心形状。以下是一种常见的实现方法：

HTML结构

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

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

动画效果增强

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

@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.2); }
  100% { transform: rotate(45deg) scale(1); }
}

.heart {
  animation: heartbeat 1s infinite;
}

纯CSS桃心替代方案

使用clip-path属性创建更精确的桃心形状：

.heart {
  width: 100px;
  height: 90px;
  background: red;
  clip-path: path(
    "M10,30 Q10,0 50,30 Q90,0 90,30 Q90,60 50,90 Q10,60 10,30"
  );
  transform: none;
}

响应式桃心设计

通过CSS变量使桃心尺寸可调整：

css桃心制作

:root {
  --heart-size: 100px;
  --heart-color: #ff0000;
}

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

这些方法可以根据项目需求灵活组合使用，通过调整颜色、尺寸和动画参数，可以创建出各种风格的CSS桃心效果。