純css滾動(dòng)進(jìn)度條，橫向進(jìn)度條隨著頁(yè)面滾動(dòng)而變化

gzwnzss

效果如下：

鼠標(biāo)往下移動(dòng)就會(huì)變化

1.     <style>
   
2.         body {
   
3.             background-image: linear-gradient(to top right, #32a6ff 50%, #fff 50%);
   
4.             background-size: 100% calc(100% - 100vh + 5px);
   
5.             background-repeat: no-repeat;
   
6.         }
   
7. 
   
8.             body::after {
   
9.                 content: '';
   
10.                 position: fixed;
    
11.                 top: 3px;
    
12.                 bottom: 0;
    
13.                 left: 0;
    
14.                 right: 0;
    
15.                 background: #fff;
    
16.                 z-index: -1;
    
17.             }
    
18.     </style>

復(fù)制代碼