第一个问题，如何用CSS实现下面的滚动条效果？就是最上方的黄色滚动进度条，随着页面的滚动，长度会发生变化。在继续阅读以下内容之前，您可以花点时间。试想一下上面的效果或者自己试试看，在没有JS的情况下是否可以巧妙的实现上面的效果。好的，继续。这个效果是我在业务开发过程中遇到的一个类似的小问题。其实就算用Javascript，我第一反应也是觉得很麻烦。所以我一直在想，是不是只用CSS就可以实现这种效果呢？分析需求乍一看这个效果，感觉滚动动画单靠CSS是不行的，因为涉及到页面滚动距离的计算。如果只想使用CSS，只能另辟蹊径，使用一些巧妙的方法。好吧，让我们使用CSS借助一些技巧来逐步完成这个效果。分析难点：如何知道用户当前滚动页面的距离并通知顶部进度条？正常的分析应该是这样的，但是这就落入了传统思维。进度条只是一个进度条，它接收页面的滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？这不是实现需求的问题。下面我们使用线性渐变来实现这个功能。假设我们的页面被包裹在
中，整个body可以滚动，并且给它添加一个从左下角到右上角的线性渐变：body{background-image:linear-gradient(torighttop,#ffcc0050%,#eee50%);background-repeat:no-repeat;}然后，我们可以得到这样一个效果：哇，黄色块的颜色变化其实可以表达整体的进度。其实，此时，聪明的同学应该已经知道下一步该怎么做了。我们使用一个伪元素来覆盖额外的部分：body::after{content:"";位置：固定；顶部：5px；左：0；底部：0；右：0；背景：#fff；z-index:-1;}Web前端开发学习Q-q-u-n：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路。为了演示方便，我把上面的白色底改成了黑色透明底：实际效果是这样实现的：眼尖的同学可能会发现，这样之后，滑动到最后的时候，进度条并没有到最后:原因是body的线性渐变高度设置了整个body的大小，我们调整一下渐变的高度:body{background-image:linear-gradient(torighttop,#ffcc0050%,#eee50%);背景尺寸：100%计算（100%-100vh+5px）；背景重复：不重复；}这里使用calc计算，减去100vh，也就是减去一个屏幕的高度，这样滑动到底部时渐变刚好贴合右上角。而+5px是滚动进度条的高度，高度留5px。再看效果，完美：至此，这个需求已经完美实现，小技巧不错。最后，这只是一个非常牛逼的渐变和非常小的渐变的技巧。更多你想不到的有趣CSS，请继续关注