css点击后变颜色_纯css实现滚动指示器，转自张鑫旭博客

一、CSS滚动指示器

滚动指示器指的是页面的顶端会有一个进度条，指示滚动的进度。效果如下GIF所示（点击播放）：

CSS滚动指示器指的是不借助JavaScript，纯CSS实现滚动进度效果。

二、传统的实现方法

传统CSS实现方法由一个名叫 Mike的人首先提出，时间应该是16年，这个CodePen目前已经有十几万的访问量：CSS only scroll indicator

传统的CSS实现非常有创意，具体原理如下。

在body标签上写一个对角的线性渐变，然后用一个白色的固定定位的浮层覆盖在上面，CSS代码示意如下：

body{    
    background: linear-gradient(to right top, teal 50%, white 50%);
    background-size: 100% calc(100% - 100vh);
    background-repeat: no-repe