通过调整 box-shadow 偏移值并启用全属性过渡，可实现悬停时按钮平移而背景阴影视觉位置不变的“错觉”。
通过调整 box-shadow 偏移值并启用全属性过渡，可实现悬停时按钮平移而背景阴影视觉位置不变的“错觉”。
在 CSS 悬停动效设计中，一个常见需求是：按钮本身发生位移（如 transform: translate(-5px, -5px)），但其投射的阴影在页面上看起来“静止不动”——即用户感知到阴影始终锚定在原始位置，仿佛按钮从阴影上“抬升”而出。这并非真正固定阴影（CSS 中无绝对“固定阴影”属性），而是通过反向补偿阴影偏移达成视觉一致性。
核心原理很简单：
当按钮向左上移动 5px，若希望阴影在视口中的落点不变，则需将阴影的 x 和 y 偏移量各增加 5px（即从 6px 6px → 11px 11px），从而抵消按钮位移带来的视觉偏移。
同时，必须将 transition 从仅作用于 transform 改为 all（或显式包含 box-shadow），否则阴影变化将无过渡效果，导致生硬跳变：
.install {
margin-left: 1rem;
border-radius: 4px;
padding: 10px;
box-shadow: 6px 6px 0px rgba(51, 48, 47, 1.0); /* 初始阴影：右下6px */
width: 12rem;
border: 1px solid #33302f;
position: relative;
transition: all 0.3s ease; /* ✅ 关键：启用所有可动画属性过渡 */
}
.install:hover {
transform: translate(-5px, -5px); /* 按钮左上位移 */
box-shadow: 11px 11px 0px rgba(51, 48, 47, 1.0); /* 阴影同步右下+5px补偿 */
}
✅ 注意事项与最佳实践：
- 避免 transition: all 的滥用：虽此处适用，但在复杂组件中建议明确列出需过渡的属性（如 transition: transform 0.3s ease, box-shadow 0.3s ease），提升性能与可维护性；
- 阴影模糊与扩散值：本例使用 0px 模糊，若需带柔边阴影（如 6px 6px 8px rgba(...)），需同步调整 blur-radius 和 spread-radius，但偏移补偿逻辑不变；
- 层级安全：确保 .install 元素未被父容器 overflow: hidden 截断，否则位移后部分阴影可能被裁切；
- 无障碍友好：该动效纯属视觉增强，不影响语义与键盘焦点，符合 WCAG 基础要求。
最终效果：鼠标悬停时，按钮轻盈上浮，而阴影稳稳“扎根”于原位——专业 UI 动效中提升质感的关键细节。
