用HTML+CSS+JS做一个动态爱心效果

以下是一个简单的动态爱心效果示例，使用了HTML、CSS和JavaScript：

HTML代码：

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

CSS代码：

.heart {
  position: relative;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  transform-origin: center;
  background-color: red;
}

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

.heart::before {
  top: -25px;
}

.heart::after {
  left: -25px;
}

JavaScript代码：

const heart = document.querySelector('.heart');
heart.addEventListener('click', function() {
  heart.classList.toggle('animate');
});

解释：

- HTML代码创建了一个空的`<div>`元素，使用了`.heart`类样式。
- CSS代码定义了`.heart`类样式，使用了transform属性将其旋转45度，同时使用transform-origin属性将其中心点设置为中心位置。使用伪元素`:before`和`:after`来创建左半部分和右半部分的爱心，使用绝对定位将其定位到中心位置。
- JavaScript代码使用事件监听器为`.heart`元素添加了一个`click`事件，并在该事件中切换了`.animate`类样式，用于触发动画效果。

如果您想尝试该效果，可以将以上三段代码复制到一个HTML文件中，并在浏览器中打开该文件。当您单击爱心时，将启动动画效果。