在前端交互开发中，鼠标按住与释放的动画切换是很实用的效果，比如按钮按压反馈、可拖拽元素的激活状态变化等。结合CSS变量和JavaScript事件实现这种效果，不需要频繁修改DOM的内联样式，只需要更新CSS变量的值就能触发样式变化，代码更简洁且性能更好。
核心实现原理
整个实现逻辑分为三个部分：首先在CSS中定义全局或局部的CSS变量，作为动画相关样式的控制参数；然后为需要交互的元素绑定mousedown和mouseup事件，分别对应鼠标按住和释放的操作；最后在事件回调中修改CSS变量的值，配合CSS的transition属性实现平滑的动画过渡。
基础样式与CSS变量定义
我们先定义一个可交互的按钮元素，通过CSS变量控制它的背景色、缩放比例和阴影效果，同时添加过渡属性让样式变化产生动画效果。
/* 定义根作用域的CSS变量，也可以定义在目标元素的作用域 */
:root {
--btn-bg: #409eff; /* 默认背景色 */
--btn-scale: 1; /* 默认缩放比例 */
--btn-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); /* 默认阴影 */
}
.interactive-btn {
width: 200px;
height: 60px;
border: none;
border-radius: 8px;
color: #fff;
font-size: 16px;
cursor: pointer;
/* 使用CSS变量控制样式 */
background-color: var(--btn-bg);
transform: scale(var(--btn-scale));
box-shadow: var(--btn-shadow);
/* 过渡动画配置，所有变化的属性在0.2秒内完成过渡 */
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
JavaScript事件绑定与变量修改
接下来为按钮绑定鼠标事件，当鼠标按住时修改CSS变量为激活状态的值，释放时恢复为默认值，从而实现动画切换。
// 获取目标按钮元素
const btn = document.querySelector('.interactive-btn');
// 鼠标按住事件回调
function handleMouseDown() {
// 修改根作用域的CSS变量，也可以修改元素自身的CSS变量
document.documentElement.style.setProperty('--btn-bg', '#337ecc');
document.documentElement.style.setProperty('--btn-scale', '0.95');
document.documentElement.style.setProperty('--btn-shadow', '0 2px 6px rgba(64, 158, 255, 0.5)');
}
// 鼠标释放事件回调
function handleMouseUp() {
document.documentElement.style.setProperty('--btn-bg', '#409eff');
document.documentElement.style.setProperty('--btn-scale', '1');
document.documentElement.style.setProperty('--btn-shadow', '0 4px 12px rgba(64, 158, 255, 0.3)');
}
// 绑定事件监听
btn.addEventListener('mousedown', handleMouseDown);
btn.addEventListener('mouseup', handleMouseUp);
// 增加鼠标移出元素的释放处理，避免鼠标移出后变量未恢复
btn.addEventListener('mouseleave', handleMouseUp);
HTML结构示例
完整的HTML结构如下，将样式、脚本和元素整合在一起即可运行。
<!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>
:root {
--btn-bg: #409eff;
--btn-scale: 1;
--btn-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}
.interactive-btn {
width: 200px;
height: 60px;
border: none;
border-radius: 8px;
color: #fff;
font-size: 16px;
cursor: pointer;
background-color: var(--btn-bg);
transform: scale(var(--btn-scale));
box-shadow: var(--btn-shadow);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
</style>
</head>
<body>
<button class="interactive-btn">按住我试试</button>
<script>
const btn = document.querySelector('.interactive-btn');
function handleMouseDown() {
document.documentElement.style.setProperty('--btn-bg', '#337ecc');
document.documentElement.style.setProperty('--btn-scale', '0.95');
document.documentElement.style.setProperty('--btn-shadow', '0 2px 6px rgba(64, 158, 255, 0.5)');
}
function handleMouseUp() {
document.documentElement.style.setProperty('--btn-bg', '#409eff');
document.documentElement.style.setProperty('--btn-scale', '1');
document.documentElement.style.setProperty('--btn-shadow', '0 4px 12px rgba(64, 158, 255, 0.3)');
}
btn.addEventListener('mousedown', handleMouseDown);
btn.addEventListener('mouseup', handleMouseUp);
btn.addEventListener('mouseleave', handleMouseUp);
</script>
</body>
</html>
优化与扩展思路
上述实现是基础版本，还可以根据需求做进一步优化：
- 如果多个元素需要独立的交互状态，可以把CSS变量定义在元素自身的作用域，而不是根作用域，避免变量互相影响。
- 可以增加
touchstart和touchend事件的支持，适配移动端触摸操作的交互场景。 - 可以通过CSS变量的不同取值，实现更复杂的动画效果，比如旋转、透明度变化、边框样式变化等。
- 如果需要在动画切换时执行额外的逻辑，可以在事件回调中添加对应的业务代码，比如发送统计请求、触发其他组件的状态变化等。
注意事项
在实现过程中需要注意几个问题：首先，CSS变量的命名要符合规范，避免使用中文或特殊字符；其次，transition属性要覆盖所有需要动画过渡的样式属性，否则对应属性的变化不会生效；最后，鼠标移出元素的场景也要处理变量恢复逻辑，避免出现状态异常的情况。
CSS变量JavaScript事件鼠标按住动画鼠标释放动画动画切换修改时间：2026-06-16 08:39:53