用css写一个动态爱心

可以使用CSS3中的动画属性和伪元素来实现动态的爱心效果。下面是一个简单的实现：

HTML代码：

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

CSS代码：

.heart {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 50px auto;
  transform: rotate(45deg);
  box-shadow: inset -20px 0 0 #f00, inset 0 -20px 0 #f00, inset 20px 0 0 #f00, inset 0 20px 0 #f00;
  animation: heartbeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.heart:before {
  top: -25px;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: #f00;
}

.heart:after {
  top: 0;
  left: 25px;
  width: 25px;
  height: 25px;
  background-color: #f00;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.9);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1);
  }
}

这里定义了一个 `heart` 类，它的伪元素 `before` 和 `after` 分别表示爱心的两瓣。通过设置不同的位置和大小，使它们组合成一个完整的爱心。

为了让爱心动起来，使用了 `animation` 属性来定义一个名为 `heartbeat` 的关键帧动画。这个动画通过不同的比例因子实现了心跳的效果，从而让爱心看起来像是在跳动。