在前端开发中，实现CSS动画与鼠标事件的联动是提升页面交互体验的常见需求，通过JavaScript监听鼠标事件，再动态修改CSS变量的值，就能精准控制CSS动画的播放进度、方向、速度等属性，避免传统DOM操作带来的性能损耗。
核心实现原理
整个联动控制的核心逻辑分为三个部分：
- 在CSS中定义自定义属性（即CSS变量），将动画的关键参数绑定到这些变量上
- 使用JavaScript监听目标元素的鼠标事件，比如鼠标移动、点击、悬停等
- 在事件回调函数中计算对应的参数值，动态修改元素的CSS变量值，触发CSS动画的更新
基础示例：鼠标移动控制动画旋转角度
我们先实现一个简单的效果：鼠标在元素上水平移动时，元素会随着鼠标位置旋转对应的角度，旋转动画的参数由CSS变量控制。
1. CSS样式定义
首先在CSS中定义旋转角度的CSS变量，并将该变量绑定到元素的transform属性上：
/* 定义根元素的CSS变量，也可定义到具体元素上 */
:root {
--rotate-angle: 0deg;
}
.box {
width: 200px;
height: 200px;
background-color: #4a90e2;
margin: 50px auto;
/* 使用CSS变量控制旋转角度 */
transform: rotate(var(--rotate-angle));
/* 添加过渡效果让旋转更平滑 */
transition: transform 0.1s linear;
}
2. JavaScript事件监听与变量修改
接下来编写JavaScript代码，监听.box元素的mousemove事件，根据鼠标在元素内的水平位置计算旋转角度，再更新CSS变量：
// 获取目标元素
const box = document.querySelector('.box');
// 监听鼠标移动事件
box.addEventListener('mousemove', (e) => {
// 获取鼠标在元素内的相对位置，e.offsetX是鼠标相对于元素左边界的距离
const offsetX = e.offsetX;
// 获取元素的宽度
const boxWidth = box.offsetWidth;
// 计算旋转角度，鼠标在最左端为-180度，最右端为180度
const angle = (offsetX / boxWidth) * 360 - 180;
// 将角度转换为CSS支持的格式
const angleValue = `${angle}deg`;
// 动态修改元素的CSS变量
box.style.setProperty('--rotate-angle', angleValue);
});
// 鼠标离开元素时重置旋转角度
box.addEventListener('mouseleave', () => {
box.style.setProperty('--rotate-angle', '0deg');
});
进阶示例：鼠标控制动画播放进度
如果需要控制一个逐帧动画或者关键帧动画的播放进度，同样可以通过CSS变量实现。比如我们有一个水平移动的动画，通过鼠标位置控制元素在动画路径上的位置。
1. CSS关键帧与变量绑定
/* 定义动画进度的CSS变量 */
:root {
--animation-progress: 0%;
}
.animate-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
/* 使用CSS变量控制元素水平位置 */
transform: translateX(var(--animation-progress));
transition: transform 0.05s linear;
}
/* 容器用于限制移动范围 */
.container {
width: 500px;
height: 120px;
border: 1px solid #ccc;
margin: 50px auto;
position: relative;
}
2. JavaScript控制进度逻辑
const container = document.querySelector('.container');
const animateBox = document.querySelector('.animate-box');
// 监听容器的鼠标移动事件，控制内部元素的动画进度
container.addEventListener('mousemove', (e) => {
// 获取鼠标相对于容器左边界的位置
const offsetX = e.offsetX;
// 容器的宽度
const containerWidth = container.offsetWidth;
// 元素的宽度，避免元素移出容器
const boxWidth = animateBox.offsetWidth;
// 计算最大可移动距离
const maxMove = containerWidth - boxWidth;
// 计算当前移动百分比
let progress = (offsetX / containerWidth) * 100;
// 限制进度范围在0%到100%之间
progress = Math.max(0, Math.min(progress, 100));
// 转换为具体的像素值，或者直接使用百分比
const translateValue = `${(progress / 100) * maxMove}px`;
// 更新CSS变量
animateBox.style.setProperty('--animation-progress', translateValue);
});
注意事项
- CSS变量的命名需要符合规范，以--开头，区分大小写
- 修改CSS变量时，使用
element.style.setProperty方法，而不是直接修改style属性中的其他值，这样能保证变量被正确更新 - 如果动画需要更流畅的效果，可以适当调整transition的时间，或者使用requestAnimationFrame优化事件回调的执行频率
- 对于复杂的动画控制，可以将多个动画参数绑定到不同的CSS变量上，比如动画速度、方向、延迟等，通过JavaScript分别修改这些变量实现多维度控制
优势总结
这种实现方式的优势在于：不需要操作DOM元素的动画相关样式属性，只需要修改CSS变量，性能更好；CSS变量可以作用到多个元素上，方便实现批量控制；原生技术实现，没有额外的依赖，兼容性好，只要浏览器支持CSS变量和ES6语法就可以正常运行。
CSS动画JavaScriptCSS变量鼠标事件修改时间：2026-06-23 14:54:20