用css和js写一个爱心，爱心会旋转，粒子动效，汇集效果，粉色

好的，以下是示例代码：

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

// CSS
.heart-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
}

.heart {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: pink;
  transform: rotate(45deg);
  animation: heart-rotate 4s linear infinite;
}

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

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

@keyframes heart-rotate {
  0% {
    transform: rotate(0);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

// JS
const heartContainer = document.querySelector(".heart-container");

for (let i = 0; i < 30; i++) {
  const heart = document.createElement("div");
  heart.classList.add("heart-particle");
  heart.style.animationDelay = `${Math.random() * 4}s`;
  heartContainer.appendChild(heart);
}

解释一下：

- HTML：创建一个爱心容器和一个爱心元素。
- CSS：设置爱心容器和爱心元素的基本样式。利用 `:before` 和 `:after` 伪元素创建爱心的两个半边。使用 `transform: rotate()` 旋转爱心，使用 `animation` 属性使其旋转动画，使用 `animation-delay` 属性使粒子动效出现的时间错开。
- JS：将创建出的粒子动效元素添加到爱心容器中，并设置不同的 `animation-delay` 值，以达到错开出现的效果。

效果如下：