css红心制作

CSS红心制作方法

通过CSS可以创建简单的红心形状，主要利用伪元素和transform属性实现。以下是两种常见方法：

基础红心形状

使用单个div元素和伪元素，通过旋转和圆角实现：

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

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

动画红心效果

添加悬停动画增强交互性：

.heart {
  /* 基础样式同上 */
  transition: transform 0.3s ease;
}

.heart:hover {
  transform: scale(1.2);
}

.heart:before, .heart:after {
  /* 基础样式同上 */
  transition: background 0.3s ease;
}

.heart:hover:before, .heart:hover:after {
  background: #ff4d4d;
}

简化版红心

使用clip-path属性快速创建：

.heart {
  width: 100px;
  height: 100px;
  background: 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"
  );
}

关键实现原理

• 通过两个半圆形（:before和:after伪元素）旋转45度组合
• 使用border-radius控制顶部圆角
• transform-origin确定旋转基准点
• 颜色和大小可通过CSS变量自定义

这些方法均无需图片，纯CSS实现且支持响应式调整。可根据实际需求选择合适方案，并通过调整尺寸、颜色或添加动画效果进一步定制。