如何让按钮悬停时阴影位置保持固定？

通过调整 box-shadow 偏移量并扩展 transition 属性作用范围，可实现按钮位移时阴影视觉位置“静止不动”的错觉。 通过调整 box-shadow 偏移量并扩展 transition 属性作用范围，可实现按钮位移时阴影视觉位置“静止不动”的错觉。在 CSS 悬停动效设计中，一个常见但易被忽略的视觉需求是：希望按钮自身发生位移（如 transform: translate()），而其投射的阴影在页面中保持相对静止——即用户感知到“阴影没动，只有按钮在上浮”。这并非真正固定阴影（CSS 中无法直接锚定阴影坐标），而是利用反向补偿偏移营造视觉一致性。核心原理很简单：当按钮向左上移动 (-5px, -5px) 时，若同时将阴影向右下扩大 (+5px, +5px)，即从 6px 6px 变为 11px 11px，那么阴影的右下边缘位置保持不变，整体阴影区域在视口中的落点几乎恒定，从而产生“阴影静止、按钮上浮”的专业动效体验。以下是完整实现代码： VWO 一个A/B测试工具