纯css滚动进度条，横向进度条随着页面滚动而变化

gzwnzss

效果如下：

鼠标往下移动就会变化

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>

变化, 滚动, 进度, 效果, 如下