纯css滚动进度条,横向进度条随着页面滚动而变化
效果如下:
鼠标往下移动就会变化
鼠标往下移动就会变化
- <style> body { background-image: linear-gradient(to top right, #32a6ff 50%, #fff 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; } body::after { content: ''; position: fixed; top: 3px; bottom: 0; left: 0; right: 0; background: #fff; z-index: -1; } </style>