html +css 画一个爱心动画

以下是使用HTML和CSS画一个爱心动画的代码：

HTML：

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

CSS：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
  
.heart:before {
  animation: beat 1s infinite;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

在这个例子中，我们使用一个div元素来画一个爱心。我们使用`:before`和`:after`伪元素来分别创建左和右边的两个半心形状，并使用`transform`旋转它们来形成一个完整的爱心。我们还使用`border-radius`属性来创建圆弧边缘，使它们看起来更像是卡通爱心。

最后，我们使用CSS动画来让爱心有跳动的效果。我们使用`@keyframes`关键字创建一个名为“beat”的动画，然后将其应用于`:before`伪元素。在这个动画中，我们使用`transform`属性来缩放爱心，使它看起来像是在跳动。