按钮文字悬停位移应包裹在span中并设为inline-block/block，用transform: translatex(2px)配合transition: transform 0.25s ease-out实现；避免嵌套transform、慎用all过渡；方向宜右移或上移≤6px，移动端需js fallback。
button:hover 里用 transform: translate() 实现文字位移
按钮文字悬停位移，本质是移动 span 或直接作用于按钮内的文本容器（如内联元素），不能对纯文本节点直接应用 transform。常见做法是把文字包进 span，再对其设置 transform。
注意：若按钮本身用了 transform（比如整体上浮），又同时想让文字单独位移，必须确保文字容器层级足够、且未被父级 transform 干扰（CSS transform 会创建新的 stacking context 和 containing block）。
-
span必须设为display: inline-block或block才能响应transform - 避免在
button上同时用transform和在子span上再用transform——嵌套 transform 容易导致视觉错位或硬件加速冲突 - 若只需文字微动（如右移 2px），推荐用
transform: translateX(2px)，比改margin或padding更性能友好
transition 要明确包含 transform 属性
只写 transition: all 0.3s 看似省事，但容易拖慢渲染——尤其当按钮含图标、边框、阴影时，all 会触发 layout、paint、composite 多阶段重绘。实际只需动文字位置，就该精准控制：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写成
transition: transform 0.25s ease-out即可，更轻量 - 如果文字位移和阴影变化同时发生（比如文字右移 + 阴影右扩），则需显式列出：
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out - 别漏掉
ease-out类曲线——文字位移用缓出比线性更自然，生硬的linear容易显得机械
文字位移方向与用户预期要一致
悬停时文字位移不是炫技，而是强化交互反馈。方向选错反而干扰识别：
- 按钮主操作方向是“点击确认”，文字右移（
translateX(4px)）或轻微上移（translateY(-2px)）最安全，符合“向前推进”直觉 - 避免左移或下移——左移像撤回，下移像沉降，与点击意图相悖
- 位移量建议 ≤ 6px：超过 8px 就容易让文字跳出按钮边界，尤其窄按钮；可用
overflow: hidden包裹但会损失可读性 - 配合颜色微调更稳妥：比如文字右移同时加
color: #222（比默认深一点），比单靠位移更可靠
移动端 touch 设备上的位移动画要谨慎
手机端没有 hover 状态，:hover 仅在模拟指针时触发（如 Safari 桌面版），真机 Safari/Chrome 对 :hover 支持有限，且 touchstart 后不会自动触发 hover。
- 纯靠
:hover做文字位移，在 iOS 上大概率不生效 - 若需跨端一致，得用 JavaScript 监听
touchstart/focus，并切换 class 触发动画 - 更务实的做法：保留
:hover作为桌面增强，不依赖它做核心反馈；文字位移仅作锦上添花，非功能必需 - 务必测试真机——很多开发者在 DevTools 模拟器里看到效果，上线后发现 iPhone 完全不动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
