如何用 CSS 实现从左向右展开的渐变加载条动画-html教程-PHP中文网

如何用 CSS 实现从左向右展开的渐变加载条动画

本文介绍如何通过 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）。

以下是完整可运行的代码示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 元素，利于维护与性能。