如何在div中为元素设置动画以跟踪鼠标移动？

<div id="myDiv"></div>

#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
}

var div = document.getElementById("myDiv");

div.addEventListener("mousemove", function(event) {
  // 获取鼠标的当前位置
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // 计算div元素的中心点位置
  var divX = div.offsetLeft + div.offsetWidth / 2;
  var divY = div.offsetTop + div.offsetHeight / 2;

  // 计算鼠标相对于div中心点的偏移量
  var offsetX = mouseX - divX;
  var offsetY = mouseY - divY;

  // 设置div元素的动画效果，使其跟随鼠标移动
  div.style.transform = "translate(" + offsetX + "px, " + offsetY + "px)";
});