使用 CSS 变量（最简单、最推荐）
这种方法利用 CSS 的自定义属性（变量）和 transform 属性，性能非常好，代码也简洁。
（图片来源网络，侵删）
核心思路：
- 在 HTML 中，人物图片（或包含图片的
div）作为一个元素。 - 在 CSS 中，为这个人物元素设置
transform-origin（变换原点）为它的中心底部，这样它就会像脚底粘在地上一样转动。 - 在 JavaScript 中，监听整个页面的
mousemove事件。 - 当鼠标移动时,计算鼠标相对于人物元素中心的角度。
- 将这个角度作为 CSS 变量的值，动态更新到人物元素上。
- 使用 CSS 的
rotate()变换来实现旋转效果。
完整代码示例
你可以直接将以下代码保存为一个 .html 文件，然后在浏览器中打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">跟随鼠标的人物</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #98D8E8);
overflow: hidden; /* 防止页面出现滚动条 */
display: flex;
justify-content: center;
align-items: flex-end; /* 让人物站在底部 */
cursor: none; /* 可选：隐藏默认鼠标指针 */
}
/* 人物容器 */
.character-container {
position: relative;
width: 150px;
height: 200px;
/* 关键：设置变换原点为脚部中心 */
transform-origin: center bottom;
/* 平滑过渡旋转效果 */
transition: transform 0.1s ease-out;
}
/* 人物图片 */
.character {
width: 100%;
height: 100%;
object-fit: contain; /* 确保图片完整显示 */
}
/* 自定义鼠标指针 */
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
background: radial-gradient(circle, #ff6b6b, #ff5252);
border-radius: 50%;
pointer-events: none; /* 让鼠标事件可以穿透 */
transform: translate(-50%, -50%);
z-index: 9999;
box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
</style>
</head>
<body>
<div class="character-container" id="character">
<!-- 使用一张你喜欢的图片，最好是透明背景的 PNG -->
<img src="https://i.postimg.cc/9Qm8R0gW/character.png" alt="A character" class="character">
</div>
<div class="custom-cursor" id="cursor"></div>
<script>
const character = document.getElementById('character');
const cursor = document.getElementById('cursor');
// 获取人物元素的位置和尺寸
function getCharacterRect() {
return character.getBoundingClientRect();
}
// 鼠标移动事件监听
document.addEventListener('mousemove', (event) => {
// 1. 更新自定义鼠标指针的位置
cursor.style.left = event.clientX + 'px';
cursor.style.top = event.clientY + 'px';
// 2. 计算人物旋转角度
const rect = getCharacterRect();
// 人物的中心点坐标
const characterX = rect.left + rect.width / 2;
const characterY = rect.top + rect.height / 2;
// 鼠标的坐标
const mouseX = event.clientX;
const mouseY = event.clientY;
// 使用 Math.atan2 计算弧度
// atan2(dy, dx) dy 是 y 轴差值，dx 是 x 轴差值
const radians = Math.atan2(mouseY - characterY, mouseX - characterX);
// 将弧度转换为角度 (180 / PI)
let degrees = radians * (180 / Math.PI);
// 调整角度，让人物朝向鼠标
// 因为 atan2 计算出的 0 度是水平向右，我们可能希望 0 度是朝向屏幕上方
// 所以可以根据需要调整，degrees -= 90;
// 但对于这个例子，直接使用也可以
character.style.transform = `rotate(${degrees}deg)`;
});
</script>
</body>
</html>
如何使用：
- 准备图片：你需要一张人物图片，最好是 PNG 格式，并且背景是透明的，将图片命名为
character.png（或者修改代码中的文件名），并与这个 HTML 文件放在同一个文件夹里。 - 复制代码：将上面的所有代码复制到一个新的文本文件中。
- 保存文件：将文件另存为
follow_mouse.html。 - 打开浏览器：用 Chrome、Firefox 或 Edge 等现代浏览器打开这个文件，移动鼠标，你就会看到人物会一直朝向你的鼠标指针。
使用 CSS hover 伪类（纯 CSS，交互有限）
这种方法不使用 JavaScript，仅用 CSS 实现，但交互性很差，人物只会朝向鼠标悬停的区域，而不是实时跟随。
（图片来源网络，侵删）
核心思路：
利用 hover 伪类结合 transform: rotate()，但 CSS 无法直接获取鼠标坐标，所以这种方法只能实现一些预设方向的切换。
示例代码：
.character {
/* ... 其他样式 ... */
transition: transform 0.3s ease;
}
/* 当鼠标在人物左侧时 */
.character-container:hover::before {
content: "";
position: absolute;
left: -100vw;
top: 0;
width: 100vw;
height: 100vh;
z-index: -1;
}
/* 这种方法非常笨拙，不推荐 */
这种方法非常不灵活,无法实现平滑的实时跟随，强烈不推荐用于此需求。
使用 JavaScript 和 Canvas（专业级，性能高）
对于游戏或需要大量动画元素的场景,使用 Canvas 是更好的选择，它提供了更高的性能和更底层的绘图控制。
（图片来源网络，侵删）
核心思路：
- 在页面上创建一个
<canvas>元素，并让它覆盖整个视口。 - 使用 JavaScript 加载人物图片。
- 在
mousemove事件中，获取鼠标位置。 - 在每一帧动画（使用
requestAnimationFrame）中，清除画布，计算人物应朝向的角度，然后将图片绘制在画布上，并应用旋转。
优点：
- 性能卓越：当有多个移动的、旋转的、缩放的元素时，Canvas 的性能远超操作 DOM 元素。
- 功能强大：可以实现更复杂的动画效果，如粒子、路径动画等。
缺点：
- 代码复杂：需要处理图像加载、画布绘制、动画循环等，比 CSS 方法复杂得多。
- 不易于集成：与传统的 HTML/CSS 布局结合时可能需要更多工作。
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CSS 变量 | 简单、易实现、性能好、代码可读性高 | 旋转中心固定（如脚部），无法实现骨骼动画 | 绝大多数网页交互效果，个人博客、作品集等 |
| Canvas | 性能极高、功能强大、适合复杂动画 | 代码复杂、学习曲线陡峭 | 游戏、数据可视化、有大量动画元素的复杂应用 |
对于你的需求——“网页上随着鼠标动的人物”，我强烈推荐使用第一种方法（CSS 变量），它完美地平衡了实现的简单性、代码的可维护性和良好的性能，足以满足绝大多数情况。
