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

张开发
• 2026/4/17 2:35:01 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何让按钮悬停时阴影位置保持固定（仅按钮位移）
本文详解如何实现按钮悬停时仅自身发生位移如 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翻

更多文章