本文详解如何使用 background-size 和 background-position 实现纯 CSS 的、从左侧起点开始的线性渐变滑动加载效果，避免嵌套元素与尺寸过渡问题，提升性能与语义化。
本文详解如何使用 background-size 和 background-position 实现纯 css 的、从左侧起点开始的线性渐变滑动加载效果，避免嵌套元素与尺寸过渡问题，提升性能与语义化。
在构建轻量级交互 UI（如按钮加载指示器）时，常需模拟“从左向右推进”的滑动填充动画。但若直接对子元素的 width/height 做 transition，不仅结构冗余（需额外 <div class="btn">），还会因默认 <code>background-position: 0 0 导致动画从左上角起始——视觉上像“从左上斜向铺开”，而非理想中“水平向右匀速延伸”的加载条效果。
✅ 正确解法是：仅用单个元素 + 渐变背景 + 可动画的 background-size。
核心原理如下：
- 初始状态：
background-size: 0% 100%→ 背景宽度为 0，高度铺满容器； - 悬停状态：
background-size: 100% 100%→ 背景完整显示； - 关键控制点：
background-position: 0 50%→ 将背景锚点水平固定在左侧（0），垂直居中（50%），确保扩展始终从最左边缘开始，不偏移。
以下是精简、健壮的实现代码：
立即学习“前端免费学习笔记（深入）”；
.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，高度 100%，锚点居左中 */
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 Transitions Level 2），无需 JS 或伪元素； - ⚠️ 避免错误写法：
z-index: 100px（单位非法，应为100）； - ? 若需更细腻控制起始/结束节奏，可将
transition-timing-function替换为cubic-bezier(0.34, 1.56, 0.64, 1)等缓动函数，增强“加载感”； - ? 兼容性良好：Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+ 均支持
background-size过渡； - ? 扩展场景：结合
@keyframes可实现循环流动光效；添加background-clip: text与color: transparent还能用于文字高亮动画。
此方案语义清晰、DOM 极简、性能优异，是现代 CSS 动画实践中推荐的标准模式。
