最終效果

進度條實際效果展示

創(chuàng)建進度條的步驟

1. 創(chuàng)建一個元素并。

   <div class='prog'></div>
   

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

2. 在background-image中使用linear-gradient屬性創(chuàng)建一個半透明的漸變層(該層背景是為了是進度條具有視覺上的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. 繼續(xù)在background-image中使用linear-gradient創(chuàng)建一層背景，該背景為滾動條的底色，為兩種顏色的條紋，效果如下圖所示(圖中增加了一圈內(nèi)陰影)。

   .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設(shè)置為200% 100%,這樣進度條中完成部分和未完成部分的長度均為100%，這樣便可以通過后續(xù)修改background-position來達到進度條滾動的效果。

5. 設(shè)置過渡動畫，定義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時先定義的背景層在上方，后定義的背景層在下方。