前端开发中，给页面背景加鼠标跟随效果能大幅提升交互质感，不管是单张背景图的轻量跟随，还是行星、星空这类多元素的分层视差跟随，核心都是通过 JS 计算鼠标偏移量，配合 CSS 的 transform 实现元素位移，下面分两种实用方法讲解，适配不同开发场景。
方法一：基础单背景跟随
适合单张整屏背景、局部模块背景的简单跟随需求，效果轻盈，代码简洁，易上手。
核心原理：
- 先获取页面 / 容器的中心点坐标，作为鼠标偏移的参考原点；
- 监听鼠标移动事件，实时获取鼠标当前坐标，计算鼠标相对中心点的X/Y 轴偏移量；
- 通过 CSS 的
transform: translate()给背景元素设置位移，偏移量乘以缩放系数控制移动幅度，避免位移过于夸张； - 背景元素需通过定位（fixed/absolute）脱离文档流，保证能自由位移且不影响其他元素。
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景随鼠标移动（基础单元素版）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面容器，相对定位作为参考（局部背景用这个） */
.page {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
/* 遮挡背景元素的溢出部分，避免出现滚动条 */
}
/* 核心：背景元素样式 */
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 用渐变背景测试，可替换为背景图url() */
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
/* 开启硬件加速，让位移更丝滑 */
will-change: transform;
}
/* 前景文字，用于对比显示跟随效果 */
.content {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32px;
font-weight: bold;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="page">
<div class="bg"></div>
<div class="content">鼠标移动看看背景变化 ✨</div>
</div>
<script>
// 获取背景元素
const bg = document.querySelector(".bg");
// 获取页面中心点坐标（局部背景则取容器的宽高计算）
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 监听鼠标移动事件
window.addEventListener("mousemove", (e) => {
// 获取鼠标当前坐标
const mouseX = e.clientX;
const mouseY = e.clientY;
// 计算鼠标相对中心点的偏移量
const offsetX = mouseX - centerX;
const offsetY = mouseY - centerY;
// 设置背景位移：缩放系数0.02控制移动幅度，可自行调整
bg.style.transform = `translate(${offsetX * 0.02}px, ${offsetY * 0.02}px)`;
});
</script>
</body>
</html>注意事项
- 缩放系数建议设为0.01~0.05，数值越大背景移动越明显，超过 0.1 会出现位移过于夸张的问题；
- 背景定位选择：整屏全局背景用
position: fixed，局部模块内的背景用position: absolute（需给父容器加position: relative）； - 给背景元素加
will-change: transform开启硬件加速，避免鼠标快速移动时出现动画卡顿； - 父容器必须加
overflow: hidden，防止背景元素位移后超出容器出现滚动条。
方法二：多元素视差跟随
适合行星、星空、多层星云这类分层背景的场景，不同层级的元素设置不同的移动幅度，形成远近错落的视差效果，还原真实的空间层次感。
核心原理：
- 基础逻辑和单背景一致，仍通过鼠标相对中心点的偏移量计算位移；
- 给不同层级的背景元素设置不同的缩放系数（移动倍率），离视觉越远的元素系数越小，移动越慢；离视觉越近的元素系数越大，移动越快，形成视差；
- 推荐通过 HTML 的
data-*自定义属性给每个元素绑定专属倍率，JS 中动态获取，无需写死代码，扩展性更强； - 遍历所有背景元素，根据各自的倍率计算位移并赋值，实现分层跟随。
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景随鼠标移动（行星视差进阶版）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sky {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
background: #0a0e2a;
}
/* 星空：最远层，移动最慢 */
.star {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://picsum.photos/id/1022/1920/1080") no-repeat center;
background-size: cover;
opacity: 0.8;
will-change: transform;
}
/* 星云：中间层，移动速度中等 */
.nebula {
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
background: linear-gradient(90deg, rgba(131,58,180,0.2), rgba(253,29,29,0.1), rgba(252,176,69,0.2));
border-radius: 50%;
will-change: transform;
}
/* 行星：近层，移动速度最快 */
.planet {
position: absolute;
border-radius: 50%;
will-change: transform;
}
/* 自定义行星样式，分散在页面中 */
.planet1 {
width: 80px;
height: 80px;
top: 20%;
left: 20%;
background: #409eff;
}
.planet2 {
width: 120px;
height: 120px;
top: 60%;
left: 70%;
background: #67c23a;
}
.planet3 {
width: 50px;
height: 50px;
top: 40%;
left: 50%;
background: #f56c6c;
}
/* 前景文字 */
.title {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 40px;
text-shadow: 0 0 15px rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="sky">
<!-- 最远层：星空，倍率0.01 -->
<div class="star" data-speed="0.01"></div>
<!-- 中间层：星云，倍率0.03 -->
<div class="nebula" data-speed="0.03"></div>
<!-- 近层：行星，倍率0.06/0.08/0.1（不同行星也可不同倍率） -->
<div class="planet planet1" data-speed="0.06"></div>
<div class="planet planet2" data-speed="0.08"></div>
<div class="planet planet3" data-speed="0.1"></div>
<!-- 前景文字 -->
<div class="title">行星视差鼠标跟随 🌌</div>
</div>
<script>
// 获取所有需要跟随的背景元素（星空、星云、行星）
const bgElements = document.querySelectorAll("[data-speed]");
// 获取页面中心点坐标
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// 监听鼠标移动，实现分层跟随
window.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
// 计算鼠标相对中心点的基础偏移量
const baseOffsetX = mouseX - centerX;
const baseOffsetY = mouseY - centerY;
// 遍历所有元素，根据各自的data-speed计算位移
bgElements.forEach(item => {
// 获取自定义属性中的移动倍率，转为数字类型
const speed = Number(item.dataset.speed);
// 按倍率计算当前元素的位移量
const moveX = baseOffsetX * speed;
const moveY = baseOffsetY * speed;
// 赋值给transform实现位移
item.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
</script>
</body>
</html>注意事项
- 视差倍率分层原则：远层小系数，近层大系数，建议远层 0.01~0.03，中间层 0.03~0.06，近层 0.06~0.1，避免层级位移混乱；
- 给大尺寸背景元素（如星云）设置略大于屏幕的宽高（如 120%），并偏移定位（top: -10%），防止位移后出现空白区域；
- 所有跟随元素都加
will-change: transform，开启硬件加速，多元素场景下也能保证动画丝滑； - 若需局部容器内的视差效果，只需将
window.innerWidth/innerHeight替换为容器的宽高，并将容器设为position: relative + overflow: hidden即可； - 超多多元素场景下，可给 mousemove 事件加节流函数（如 lodash 的_.throttle），减少 JS 执行次数，优化性能（新手可先忽略，基础场景无需节流）。
通用优化技巧
- 位移优先用
transform: translate()，而非left/top：translate 不会触发页面重排，仅触发重绘，动画性能远高于 left/top； - 背景图建议用
background-size: cover/contain，适配不同屏幕尺寸，避免位移后出现空白； - 可结合
opacity/scale做复合效果，比如鼠标移动时背景轻微缩放，提升交互丰富度； - 给移动幅度加正负值，比如部分元素
translate(-moveX, -moveY)，实现反向跟随，增强空间感。
