应使用background-size而非width/height实现hover背景填充动画，因背景图不占布局流且需控制可见区域；正确做法是结合background-size与background-position，用0%→100%宽度过渡模拟从左到右展开效果，并设no-repeat防止重复。
hover 背景填充动画为什么用 background-size 而不是 width/height
直接改 width 或 height 无法实现「从左到右铺满背景」的效果，因为背景图本身不占布局流，且默认裁剪方式固定。真正可控、平滑、兼容性好的方案是利用 background-size 配合 background-position 控制渐变层的可见区域。
- 用
linear-gradient创建一层纯色遮罩作为伪背景 - 初始设
background-size: 0% 100%（宽度为 0，高度铺满），background-position: left center - hover 时过渡到
background-size: 100% 100%，视觉上就是从左向右“展开”填充 - 必须加
background-repeat: no-repeat，否则多段重复会出错
如何避免 hover 动画触发时文字跳动或布局抖动
常见原因是未预留背景层空间，导致渲染时重绘范围扩大。最稳妥的做法是让容器始终维持相同尺寸和定位上下文。
- 给元素设置明确的
display: inline-block或display: block，避免inline元素受行高影响 - 确保父容器没有
overflow: hidden以外的截断行为（比如transform未触发硬件加速时可能闪烁） - 添加
will-change: background-size（仅对频繁 hover 的按钮等高频交互元素） - 不要在 hover 中同时修改
padding、border或font-size，这些会触发布局重排
兼容老浏览器（IE10+）的 fallback 写法怎么写
IE10 支持 transition 但不支持 background-size 动画；Safari 早期版本对 background-position 过渡支持不稳定。需要降级为纯颜色切换 + 简单淡入。
- 先写标准写法（现代浏览器）
- 再在上面覆盖 IE 友好写法：
transition: background-color 0.3s ease+hover里只改background-color - 用
@supports (background-size: 0 0)包裹高级动画，防止低版本解析失败 - 避免使用
background-image: paint(...)或 CSS Houdini，目前无实用兼容性
用伪元素实现更灵活的填充方向（从下往上 / 对角线）
如果需要非水平方向的填充（比如底部向上、中心扩散），用伪元素比单层 background 更可控，也更容易加阴影、边框等效果。
- 给元素设
position: relative，伪元素::after绝对定位覆盖全区域 - 初始
transform: scaleY(0)+transform-origin: bottom实现“从下往上”伸展 - hover 时改为
transform: scaleY(1)，配合transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) - 注意：伪元素需设
content: ""和z-index: -1，否则可能遮挡文字或事件
实际中最容易被忽略的是 transform-origin 的取值与容器 overflow 的组合——比如父容器有 overflow: hidden 且伪元素伸展方向超出边界，动画会突然截断。这种情况得要么调 origin，要么放宽父容器溢出策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
