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;
}

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