CSS爱心代码制作

CSS爱心代码制作方法

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

基础爱心形状

使用单个div元素和伪元素创建爱心：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}
.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%;
}

跳动动画效果

添加CSS动画使爱心跳动：

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

纯CSS3爱心

使用CSS3的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"
  );
}

渐变颜色爱心

为爱心添加渐变效果：

.heart:before, .heart:after {
  background: linear-gradient(to bottom, #ff0844 0%, #ffb199 100%);
}

这些方法可以根据需要组合使用，调整大小、颜色和动画参数可获得不同效果。现代浏览器都支持这些CSS特性，无需额外JavaScript即可实现。