CSS过渡实现的按钮内部光影移动_提升UI的拟物感

background-position动画不生效的直接原因是css transition默认不监听该属性变化，需显式声明transition: background-position .3s ease，且须用具体数值（如0% 0%）、保持渐变方向一致、避免center等关键字。

button:hover 时 background-position 动画不生效

直接原因：CSS transition 默认不监听 background-position 的变化，除非你显式声明。很多同学写了 transition: all .3s 就以为万事大吉，结果 hover 上去光影纹丝不动。

实操建议：

• 必须写明过渡属性：transition: background-position .3s ease，别偷懒用 all
• background-position 要用具体数值（如 0% 0% 或 20px 10px），不能用 center 这类关键字，否则浏览器无法插值计算
• 初始状态和 hover 状态都得设 background-image（通常是线性渐变），且渐变方向一致，否则位移错乱

示例关键片段：

button {   background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0) 50%);   background-position: 0% 0%;   transition: background-position .3s ease; } button:hover {   background-position: 100% 100%; }

用 radial-gradient 模拟高光但边缘发虚

问题出在径向渐变的默认形状和尺寸——radial-gradient(circle, ...) 在小按钮上容易撑出模糊晕染，看起来像没对焦。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• 改用 radial-gradient(ellipse at 20% 30%, ...) 明确高光落点，避免居中死板
• 控制尺寸：radial-gradient(ellipse 20px 10px at 20% 30%, ...)，两个像素值分别约束宽高，防止拉伸变形
• 高光色到透明的过渡段要短，比如 #fff 70%, transparent 71%，避免灰蒙蒙的渐变带

移动端 touch 事件下光影延迟或不触发

ios safari 和部分安卓 webview 对 :hover 支持不稳定，尤其在无 hover 意图的触屏设备上，:hover 可能只在点击后短暂触发，甚至被忽略。

实操建议：

• 加一层 :active 声明，覆盖触摸瞬间：button:active { background-position: 100% 100%; }
• 对 iOS 加 cursor: pointer，能激活部分 hover 行为（虽不保证，但有胜于无）
• 更稳妥的做法是用 JavaScript 监听 touchstart / touchend 切换 class，避开伪类依赖

多层背景叠加时 z-index 无效导致光影被遮盖

CSS background 是绘制层，不是 dom 层，不存在 z-index。当按钮同时有边框、文字阴影、图标字体、伪元素等，光影很容易被其他视觉元素盖住。

实操建议：

• 把光影作为最底层背景：background: linear-gradient(...), [其他背景]，逗号分隔，越靠前越底层
• 避免用 ::before 画光影——它属于伪元素层，层级受 z-index 控制，反而更难对齐和响应
• 如果必须用伪元素，确保其 content: ""、position: absolute、z-index: -1，且父容器 position: relative

拟物光影真正难的不是动效本身，而是不同设备渲染精度差异、背景层叠顺序的隐式规则、以及 touch/hover 混合交互下的状态同步——这些地方一松懈，光就偏了。