html页面如何放置一个可以随着鼠标转动方向的娃娃

可以使用CSS和JavaScript来实现一个可以随着鼠标转动方向的娃娃。

首先，在HTML中添加一个div元素作为娃娃的容器，并在其中添加一个img元素来显示娃娃的图像。

<div id="doll-container">
  <img src="doll.png" alt="doll">
</div>

接下来，在CSS中设置容器的宽度和高度，并将图像设置为绝对定位。

#doll-container {
  width: 200px;
  height: 200px;
  position: relative;
}

#doll-container img {
  position: absolute;
  top: 0;
  left: 0;
}

然后，在JavaScript中添加事件监听器来跟踪鼠标移动，并计算鼠标与娃娃之间的角度。

const dollContainer = document.getElementById('doll-container');
const dollImg = document.querySelector('#doll-container img');

dollContainer.addEventListener('mousemove', e => {
  const rect = dollContainer.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  const angle = Math.atan2(y, x) * 180 / Math.PI;
  dollImg.style.transform = `rotate(${angle}deg)`;
});

最后，可以通过CSS添加一些样式来美化娃娃容器和图像。

#doll-container {
  width: 200px;
  height: 200px;
  position: relative;
  border: 2px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#doll-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease-in-out;
}

这样，一个可以随着鼠标转动方向的娃娃就完成了