本文介绍如何通过 background-size 和 background-position 配合 transition，精准控制渐变背景的滑入方向，实现从左侧开始、水平铺满的加载条悬停动画，避免默认从左上角缩放的视觉偏差。
本文介绍如何通过 background-size 和 background-position 配合 transition，精准控制渐变背景的滑入方向，实现从左侧开始、水平铺满的加载条悬停动画，避免默认从左上角缩放的视觉偏差。
在构建轻量级加载指示器（如按钮悬停时的进度条效果）时，许多开发者会误用 width/height 动画来驱动一个子元素伸展——这不仅增加 DOM 复杂度，还容易导致动画起点偏移（例如从左上角开始“拉伸”，而非纯粹从左向右“滑入”）。更优雅、语义更清晰的方案是：仅用单个元素 + 渐变背景 + 可动画的 background-size 属性。
核心原理在于：
- 将线性渐变设为
90deg（即从左到右），确保色彩方向符合预期； - 初始
background-size: 0% 100%表示背景图宽度为 0、高度为 100%，视觉上完全不可见； - 悬停时过渡至
background-size: 100% 100%，使渐变完整覆盖容器； - 关键控制点：
background-position: 0 50%—— 将背景锚点固定在左侧中点，确保扩展始终从左边缘开始，而非默认的左上角（0 0）。
以下是完整可运行的代码示例：
.button {
position: relative;
width: 55px;
height: 20px;
border-radius: 12px;
border: 2px solid black;
overflow: hidden;
top: 30%;
left: 45%;
z-index: 100; /* 注意：z-index 单位为无单位数值，非 '100px' */
/* 渐变背景（从左到右）*/
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(9, 9, 121, 1) 35%,
rgba(6, 78, 166, 1) 57%,
rgba(3, 134, 203, 1) 75%,
rgba(2, 156, 218, 1) 82%,
rgba(0, 212, 255, 1) 100%
);
/* 动画属性：仅过渡 background-size */
transition: background-size 2s ease-in-out;
/* 初始状态：宽度为 0，高度铺满，锚点居左中 */
background-size: 0% 100%;
background-position: 0 50%;
background-repeat: no-repeat;
}
.button:hover {
background-size: 100% 100%;
}<div class="button"></div>
✅ 注意事项与优化建议：
立即学习“前端免费学习笔记（深入）”；
-
background-size是 CSS 中少数原生支持平滑过渡的背景相关属性（background-position也可过渡，但需注意单位一致性）；而background-image本身不可动画，切勿尝试过渡它。 -
z-index: 100px是无效写法，CSS 中z-index为无单位整数，应修正为z-index: 100。 - 若需更细腻的动效，可将
transition-timing-function替换为cubic-bezier(0.34, 1.56, 0.64, 1)等缓动函数，增强“加载感”。 - 此方案完全基于 CSS，无需 JS 或额外 HTML 元素，利于维护与性能。
总结：摒弃冗余 DOM 和尺寸动画，转而利用 background-size 的可控伸缩性与 background-position 的精确定位，是实现专业级、方向明确的背景滑入动画的最佳实践。
