写一个爱心demo 要求：爱心随着鼠标的移动往四周散出多个爱心

以下是一个使用 HTML、CSS 和 JavaScript 实现的爱心 demo，可以随着鼠标的移动往四周散出多个爱心。具体实现方式如下：

HTML 代码：

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

CSS 代码：

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: #ff5f6d;
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 95, 109, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(255, 95, 109, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 95, 109, 0);
  }
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #ff5f6d;
  border-radius: 50px 50px 0 0;
}

.heart::before {
  left: -25px;
  transform: rotate(-45deg);
}

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

JavaScript 代码：

const container = document.querySelector(".container");

container.addEventListener("mousemove", (e) => {
  const heart = document.createElement("div");
  heart.classList.add("heart");
  heart.style.top = `${e.clientY}px`;
  heart.style.left = `${e.clientX}px`;
  container.appendChild(heart);
  setTimeout(() => {
    heart.remove();
  }, 2000);
});

在页面加载后，我们首先获取到容器元素 `.container`，然后给它绑定了 `mousemove` 事件。当鼠标移动时，我们创建了一个新的爱心元素 `.heart`，并且设置它的位置为鼠标的位置。然后我们将这个新的爱心元素添加到容器 `.container` 中，并且设置了一个 2 秒的定时器，在 2 秒后将这个爱心元素从容器中移除。

在 CSS 中，我们定义了一个爱心样式 `.heart`，并且使用了 CSS 动画 `pulse` 让它有一个放大和缩小的效果。同时，我们使用 `::before` 和 `::after` 伪元素来创建出爱心的两个半边，并且通过 `transform: rotate()` 来让它们旋转，最终组合成为一个完整的爱心。

通过以上代码，我们就可以实现一个随着鼠标移动而散出多个爱心的 demo。