用css写一个跳动的爱心

可以使用CSS3中的animation属性来实现一个跳动的爱心。

HTML代码：

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

CSS代码：

.heart {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 50px auto;
  transform: rotate(45deg);
  animation: beat 1s ease-in-out infinite;
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: #f00;
  border-radius: 50% 50% 0 0;
}

.heart:before {
  transform: rotate(90deg);
}

.heart:after {
  transform: rotate(180deg);
}

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

解释一下代码：

首先，创建一个div元素，为其添加样式class为"heart"。

.heart的样式：将元素设置为相对定位，使其可以在父元素中居中显示；将元素旋转45度，使其呈现出爱心的形状；添加一个名为"beat"的动画，使其不断缩放。

.heart:before和.heart:after的样式：这两个伪元素代表了爱心的两个半边，使用绝对定位将其放置在爱心的左半部分和右半部分；将它们的背景颜色设置为红色，并且将它们的圆角设置为50% 50% 0 0，使其呈现出爱心的形状。

@keyframes beat的样式：定义了名为"beat"的动画，它在0%和100%时，元素的缩放比例为1，而在50%时，元素的缩放比例为1.1，这样就实现了跳动的效果。

这样，一个跳动的爱心就完成了。