如何让按钮悬停时阴影位置保持固定（仅按钮位移）

本文详解如何实现按钮悬停时仅自身发生位移（如 translate(-5px, -5px)），而背景阴影视觉上“静止不动”的效果——核心在于同步调整 box-shadow 偏移量以抵消按钮位移带来的视觉偏移，并配合 transition: all 实现平滑动画。 本文详解如何实现按钮悬停时仅自身发生位移（如 translate(-5px, -5px)），而背景阴影视觉上“静止不动”的效果——核心在于同步调整 box-shadow 偏移量以抵消按钮位移带来的视觉偏移，并配合 transition: all 实现平滑动画。在 CSS 动画设计中，一个常见误区是：仅对 transform 设置过渡，却忽略 box-shadow 本身也是可动画的属性。当按钮使用 transform: translate(-5px, -5px) 悬停时，元素整体（含阴影）会向左上移动，导致阴影“跟着动”，破坏了“阴影固定、按钮浮起”的拟物化视觉预期。要达成“阴影锚定、按钮上浮”的效果，关键原理是：视觉上阴影位置不变 ? 按钮位移量 + 阴影偏移量 = 恒定值。原始状态：box-shadow: 6px 6px ...（右下偏移 6px）按钮悬停位移：translate(-5px, -5px)（向左上移动 5px）为抵消该位移对阴影位置的影响，需将阴影偏移量增加 +5px 在 x 和 y 方向 → 新阴影应为 11px 11px（即 6 + 5）。同时，必须将 transition 从 transform 0.3s ease 改为 all 0.3s ease（或显式声明 transition: transform 0.3s ease, box-shadow 0.3s ease），否则 box-shadow 变化将无过渡，出现突兀跳变。以下是优化后的完整代码示例： 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻