使用js写一个心动效果

以下是使用JS实现心动效果的示例代码：

HTML代码：

<div id="heart"></div>

CSS代码：

#heart {
  width: 100px;
  height: 100px;
  position: relative;
}
#heart:before,
#heart:after {
  content: "";
  position: absolute;
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

JavaScript代码：

var heart = document.getElementById("heart");
heart.addEventListener("click", function(){
  this.classList.toggle("active");
});

在这个例子中，我们使用了CSS3的伪元素:before和:after来创建两个半圆形，然后旋转它们来形成心形。我们还为div添加了一个click事件监听器，当它被点击时，会将.active类添加或删除，这样就会触发动画效果。

要注意的是，这个效果虽然简单，但它需要一些CSS3的知识。如果你不熟悉CSS3，请先学习CSS的基础知识再来尝试这个效果。