CSS-顶部滚动进度条
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ background-image: linear-gradient(to right top,#f00 50%,#ece 50%); background-repeat: no-repeat; height: 300vh; position: relative; background-size: 100% calc(100% - 100vh + 5px); } body::after{ content: ''; display: block; position: fixed; top: 5px; left: 0; bottom: 0; right: 0; z-index: -1; background-color: #fff; } </style> </head> <body> </body> </html>
效果如下: