动画进度条--通过 background-image: repeating-linear-gradient实现斑马条纹进度条并添加动画的css的使用

效果

codepen：progress

原理

通过 background-image: repeating-linear-gradient实现进度条斑马条纹并用background-position进行动画。

实现

.progress {
  margin: 300px auto;

  width: 600px;
  height: 20px;

  background-image: repeating-linear-gradient(
    45deg,
    #2ed573 0%,
    #2ed573 1%,
    #7bed9f 1%,
    #7bed9f 2%
  );

  background-position: -2% 0;
  background-size: 150%;
  animation: slider 5s linear infinite;
}

@keyframes slider {
  100% {
    background-position: -100% 0;
  }
}

知识点

repeating-linear-gradient()

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的

#grad1 {
  background-image: repeating-linear-gradient(180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,1) 25px,
      rgba(255,255,255,1) 50px);
}

解释：

• 渐变：在指定位置切换颜色
• 斑马纹：只要指定渐变的开始和结束的位置是同一个颜色，就能实现纯色而不是渐变的色块了。

background-position

background-position 为每一个背景图片设置初始位置。

百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。

因此，如果背景图片小，正百分比向右移动，图片大，正百分比向左移动。

另外需要注意，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。在这种情况下，需要为偏移使用绝对值（例如px）。

总结

简单介绍了repeating-linear-gradient和background-position的css知识，通过实际应用加深印象。另外如果需要控制动画的启停，只需要切换css即可。

如果本文对你有帮助，欢迎点赞关注，让更多的人看到。

Reference

1. repeating-linear-gradient() - CSS（层叠样式表） | MDN
2. background-position - CSS（层叠样式表） | MDN
3. 1分钟用CSS实现和bootstrap3一样的动画进度条_哔哩哔哩_bilibili