核心概念：实现元素的跟随与指向
在网页交互设计中，有时需要创建一种视觉效果：一个元素不仅能跟随用户的鼠标移动，还能同时指向屏幕的某个固定点（例如屏幕中心）。这要求我们精确计算元素的平移（translate）和旋转（rotate）变换。
实现此效果的关键在于以下几点：
- 确定屏幕中心点：这是我们元素始终指向的目标。
- 获取鼠标当前位置：作为元素平移的参考点。
- 计算鼠标位置到屏幕中心的向量：这个向量将决定元素的指向角度。
- 应用CSS transform 属性：通过 translate 和 rotate 实现元素的移动和旋转。
- 考虑SVG图像的默认方向：许多SVG图标在绘制时有其固有的朝向，需要额外的旋转校正。
HTML 结构
首先，我们需要一个用于展示效果的HTML元素。这里我们使用一个 div，并为其设置一个 id 以便JavaScript操作。
<div id="myDiv"></div>
CSS 样式
为了让 myDiv 能够自由定位和旋转，我们需要为其定义一些基础样式。
#myDiv {
cursor: none; /* 隐藏鼠标光标，增强沉浸感 */
position: absolute; /* 绝对定位，方便通过JS控制位置 */
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: lightgray; /* 备用背景色 */
transform-origin: center center; /* 设置旋转中心为元素自身中心 */
/* transform: rotate(-100deg); */ /* 初始旋转，可用于SVG校准或特定效果 */
background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain; /* 使用手电筒SVG作为背景图 */
}
body {
overflow: hidden; /* 防止页面出现滚动条，尤其是在隐藏光标时 */
}样式说明：
- cursor: none;：隐藏默认的鼠标光标，让自定义元素看起来更像光标。
- position: absolute;：允许我们使用 top、left 属性或 transform: translate() 精确控制元素位置。
- transform-origin: center center;：确保元素围绕其自身的中心点进行旋转，而不是默认的左上角。
- background 属性：我们使用一个手电筒SVG作为背景图像，它将作为我们“指向”的视觉指示器。
- overflow: hidden;：在 body 上设置此属性可以防止页面因元素超出视口而产生滚动条，这在全屏交互中尤其重要。
JavaScript 逻辑
JavaScript是实现动态效果的核心。我们需要监听鼠标移动事件，并根据鼠标位置计算元素的平移和旋转。
// 获取屏幕的中心点坐标，这将是我们的元素始终指向的目标
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 获取要操作的DOM元素
const myDiv = document.getElementById('myDiv');
document.addEventListener('mousemove', (event) => {
// 获取鼠标当前的X和Y坐标
const mouseX = event.clientX;
const mouseY = event.clientY;
// 计算从鼠标位置到屏幕中心的向量 (deltaX, deltaY)
// 这里的deltaX和deltaY是从鼠标指向中心点的方向
const deltaX = centerX - mouseX;
const deltaY = centerY - mouseY;
// 使用 Math.atan2 计算角度（弧度），然后转换为度数
// atan2(y, x) 返回的弧度值范围是 (-PI, PI]
let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
// 定义元素与鼠标之间的固定偏移距离
const distance = 50;
// 计算元素的平移位置，使其与鼠标保持一定的偏移
// 这里将元素的左上角放置在鼠标位置左上角 'distance' 像素处
const translateX = mouseX - distance;
const translateY = mouseY - - distance; // 修正：应为 mouseY - distance
// 假设SVG图像的默认朝向不是0度（指向右侧），
// extraRotationForSVG用于校准SVG的初始方向，使其在角度为0时指向正确方向
// 实际值需要根据SVG图像的内部绘制方向进行调整
const extraRotationForSVG = 210;
// 应用CSS transform，同时进行平移和旋转
myDiv.style.transform = `translate(${translateX}px, ${translateY}px) rotate(${angle + extraRotationForSVG}deg)`;
});JavaScript 代码详解：
- centerX, centerY：通过 window.innerWidth 和 window.innerHeight 获取浏览器视口宽度和高度，并计算出屏幕的中心点坐标。这些值在页面加载时确定，如果窗口大小改变，需要重新计算。
- event.clientX, event.clientY：在 mousemove 事件中，这两个属性提供了鼠标相对于浏览器视口的当前X和Y坐标。
- deltaX, deltaY：这是从鼠标位置到屏幕中心点的向量分量。例如，如果鼠标在屏幕中心左侧，centerX - mouseX 将为正值，表示需要向右旋转。
- Math.atan2(deltaY, deltaX)：这是一个非常重要的数学函数，它接收 y 和 x 两个参数，返回从 x 轴正方向到点 (x, y) 的角度（弧度）。它能够正确处理所有四个象限，避免了 Math.atan(y/x) 可能出现的象限判断问题。我们将弧度转换为度数，以便CSS rotate 属性使用。
- distance：这个变量定义了 myDiv 的左上角与鼠标光标之间的固定距离。你可以调整这个值来改变元素跟随鼠标的紧密程度或偏移量。
- translateX, translateY：根据鼠标的当前位置和 distance，计算出 myDiv 需要平移到的位置。mouseX - distance 意味着 myDiv 的左侧将比鼠标光标左移 distance 像素。
- extraRotationForSVG：这个值用于校正SVG图像的默认朝向。例如，如果你的SVG图标在0度旋转时实际上是向上指的，而你希望它在 angle 为0时指向右侧，那么你需要添加一个适当的偏移量（如90度或270度）来校准。实际值需要通过实验来确定，以使SVG的“指向”方向与计算出的 angle 匹配。
- myDiv.style.transform = ...：通过设置元素的 transform 属性，同时应用 translate（平移）和 rotate（旋转）变换。这些变换会按照指定的顺序应用，最终实现元素跟随鼠标并指向屏幕中心的效果。
完整代码示例
将上述HTML、CSS和JavaScript代码组合，即可实现所需效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态元素跟随鼠标并指向屏幕中心</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden; /* 防止页面滚动 */
background-color: #f0f0f0;
}
#myDiv {
cursor: none; /* 隐藏鼠标光标 */
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent; /* 背景色透明，只显示SVG */
transform-origin: center center; /* 旋转中心 */
background: url(https://upload.wikimedia.org/wikipedia/commons/8/89/Flashlight.svg) no-repeat center / contain;
/* transform: rotate(-100deg); */ /* 如果需要初始CSS旋转，可以在此设置 */
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
const myDiv = document.getElementById('myDiv');
// 初始计算屏幕中心
let centerX = window.innerWidth / 2;
let centerY = window.innerHeight / 2;
// 监听窗口大小变化，实时更新中心点
window.addEventListener('resize', () => {
centerX = window.innerWidth / 2;
centerY = window.innerHeight / 2;
});
document.addEventListener('mousemove', (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
// 计算从鼠标位置到屏幕中心的向量
const deltaX = centerX - mouseX;
const deltaY = centerY - mouseY;
// 使用 Math.atan2 获取角度，并转换为度数
let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
// 定义元素与鼠标之间的固定偏移距离
const distance = 50;
// 计算元素的平移位置
const translateX = mouseX - distance;
const translateY = mouseY - distance;
// SVG图像的额外旋转校准值
// 这个值需要根据实际SVG的默认朝向进行调整，确保它正确指向目标 
