代码实现爱心动画

好的，以下是一个简单的爱心动画的实现代码，使用了 HTML、CSS 和 JavaScript：

HTML 代码：

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

CSS 代码：

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background-color: #ff4d4d;
  animation: heartbeat 1s ease-in-out infinite;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background-color: #ff4d4d;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
}

.heart::after {
  left: 50px;
  transform: rotate(45deg);
}

JavaScript 代码：

const heart = document.querySelector(".heart");
const body = document.querySelector("body");

let heartSize = 100;
let heartOpacity = 1;

function animateHeart() {
  if (heartSize >= 200) {
    heartSize = 100;
    heartOpacity = 1;
  } else {
    heartSize += 2;
    heartOpacity -= 0.01;
  }
  heart.style.width = heartSize + "px";
  heart.style.height = heartSize + "px";
  heart.style.opacity = heartOpacity;
  requestAnimationFrame(animateHeart);
}

animateHeart();

这段代码创建了一个红色的爱心形状，并在其上应用了一个名为“heartbeat”的动画，使其看起来像是在跳动。JavaScript 代码则用 requestAnimationFrame() 方法实现了一个简单的动画，让爱心在不断变大和透明度降低的过程中重复播放。