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

2,820 阅读2分钟

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

progress.png

效果

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