威宁热线

威宁团菜到家

[教程分享] 纯css滚动进度条,横向进度条随着页面滚动而变化

[复制链接]
威宁热线 发表于 2021-2-7 16:28:44 | 显示全部楼层 |阅读模式

纯css滚动进度条,横向进度条随着页面滚动进度而变化长短。代码非常简单,不到20行代码,简单实用。
代码如下:
  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.             body::after {
  8.                 content: '';
  9.                 position: fixed;
  10.                 top: 3px;
  11.                 bottom: 0;
  12.                 left: 0;
  13.                 right: 0;
  14.                 background: #fff;
  15.                 z-index: -1;
  16.             }
  17.     </style>
复制代码


回复

使用道具 举报

小城世界 发表于 2021-2-7 17:16:19 手机端 | 显示全部楼层
可以修改颜色不?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表