html+css+js输出一个跳动的心

以下是使用 HTML、CSS 和 JavaScript 创建跳动的心的代码：

HTML：

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

CSS：

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  animation: beat 1s ease-in-out infinite;
}

.heart span {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.heart span:nth-child(1) {
  top: 0;
  left: 25px;
  background-color: #ff6b6b;
}

.heart span:nth-child(2) {
  top: 25px;
  left: 0;
  background-color: #ff6b6b;
}

.heart span:nth-child(3) {
  top: 25px;
  right: 0;
  background-color: #ff6b6b;
}

.heart span:nth-child(4) {
  bottom: 0;
  left: 25px;
  background-color: #ff6b6b;
}

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

JavaScript：（不需要 JavaScript）

由于上面的 CSS 中使用了 `@keyframes`，所以不需要 JavaScript。以上代码将创建一个跳动的红色心形，如下所示：