这篇文章将为大家详细讲解有关如何使用纯CSS实现滚动进度条效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
如何使用CSS实现下述滚动条效果?
就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。
分析需求
第一眼看到这个效果,感觉这个跟随滚动动画,仅靠CSS是不可能完成的,因为这里涉及了页面滚动距离的计算。
如果想只用CSS实现,只能另辟蹊径,使用一些讨巧的方法。
好、下面就借助一些奇技淫巧,使用CSS一步一步完成这个效果。分析一下难点:
<>强如何得知用户当前滚动页面的距离并且通知顶部进度条?
正常分析应该是这样的,但是这就陷入了传统的思维。进度条就只是进度条,接收页面滚动距离,改变宽度。如果页面滚动和进度条是一个整体呢?
实现需求
不卖关子了,下面我们运用<>强线性渐变来实现这个功能。
假设我们的页面被包裹在<代码> & lt; body> 中,可以滚动的是整个身体,给它添加这样一个从左下到到右上角的线性渐变:
那么,我们可以得到一个这样的效果:
哇,黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里,聪明的同学应该已经知道下面该怎么做了。
我们运用一个伪元素,把多出来的部分遮住:
为了方便演示,我把上面白色底改成了黑色透明底,:
实际效果达成了这样:
眼尖的同学可能会发现,这样之后,滑到底的时候,进度条并没有到底:
究其原因,是因为身体<代码> 的线性渐变高度设置了整个身体的大小,我们调整一下渐变的高度:
这里使用了<代码>钙> 100 vh>
而<代码> + 5 px> 5 px>
关于“如何使用纯CSS实现滚动进度条效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
