css 实现多色彩带进度条

如何使用纯 css 实现一个，像发廊门口彩灯样式的进度条呢？

认识 linear-gradient

使用纯 css 实现多色的背景，需要仰仗linear-gradient，根据 MDN 文档中的介绍，这是一个 css 函数，可以创建沿直线进行线性过度的图像

creates an image consisting of a progressive transition between two or more colors along a straight line.

它的语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个参数是方向，后面的参数全是颜色和结束位置。

1. 方向可以传递角度，例如 45 deg,90 deg，也可以传方向指令：to right, to bottom。如果不传默认就是从上到下。
2. 颜色和停止位置，例如 red 50% 表示红色直到 50%处结束。如果只传颜色不传停止位置red表示平均分配。

所以想要实现这个进度条，我们需要一条角度为 135 deg 的从红 => 蓝 => 红 的图像

确定渐变角度

将整个进度条分解可以看作是两块正方形区域，无限重复得到的结果

蓝红红蓝

根据这个示意图，可以知道需要分为四个区域，分别是：

• 方向为135deg 定位为0 0 的 蓝 => 红
• 方向为135deg 定位为50% 0的 红 => 蓝

计算中止位置

现在有个棘手的计算，怎么知道中止的位置呢

这里的蓝色方框代表第一个方框中的渐变方向，角度为 135deg 从这里可以看出，两根红线将蓝色方框均分为三份，所以这里的比例是 1/3 处

那么代码应该如下：

background: linear-gradient(135deg, red 33.33%, blue 66.66%, red 100%);

但是结果却是如下的：

并没有棱角和清晰的边界，而是渐变的 这里需要稍微加调整，在颜色切换的位置立马定义下一个颜色就能达到棱角分明的效果：

background: linear-gradient(135deg, red 33.33%, blue 33.33%, blue 66.66%, red 66.66%, red 100%);

效果如下：

其他属性

当然想要得到完整的进度条还需要其他的属性配合：

• 渐变块大小，确保长宽比为 2:1
• 渐变块重复，用重复来填充整个背景区域
• 进度条动画，让背景动起来

代码分别如下:

.progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 40px)
  height: 100%
  background-image: linear-gradient(
    135deg,
    red 0%,
    red 33.33%,
    blue 33.33%,
    blue 66.66%,
    red 66.66%,
    red
  );
  background-size: 40px 20px;
  background-repeat: repeat-x;
  animation: moveDiamonds 2s linear infinite;
}

@keyframes moveDiamonds {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-40px);
  }
}