CSS3 使用linear-gradient制作进度条

最终效果

进度条实际效果展示

创建进度条的步骤

1. 创建一个元素并。

   .prog {
       width: 300px;
       height: 30px;
   }
   

2. 在background-image中使用linear-gradient属性创建一个半透明的渐变层(该层背景是为了是进度条具有视觉上的3D效果，可不加)。

   .prog {
       background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 5%, hsla(0,0%,100%,.75) 30%, hsla(0,0%,100%,0.2), hsla(0,0%,100%,0));
   }
   

3. 继续在background-image中使用linear-gradient创建一层背景，该背景为滚动条的底色，为两种颜色的条纹，效果如下图所示(图中增加了一圈内阴影)。

   .prog {
       background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 5%, hsla(0,0%,100%,.75) 30%, hsla(0,0%,100%,0.2), hsla(0,0%,100%,0)), linear-gradient(90deg, #50ff00 50%, #eee 0);
   }
   

   

4. 将background-size设置为200% 100%,这样进度条中完成部分和未完成部分的长度均为100%，这样便可以通过后续修改background-position来达到进度条滚动的效果。

5. 设置过渡动画，定义keyframes修改background-position从100%到0%，使用线性速度播放动画便完成了最终的滚动条。

   .prog {
       animation:prog 6s linear infinite;
   }
   
   @keyframes prog {
       from {background-position: 100%;}
       to {background-position: 0%;}
   }
   

tips

多层background-image

使用多层background-image时先定义的背景层在上方，后定义的背景层在下方。