本文主要对CSS滚动进度条展示效果,大家也可以一起学习,下面就有详细的解释,另外小编还有一个web交流学习群,都是刚学习前端的小伙伴,大家一起交流,学习,讨论,每天还分享资料笔记视频,欢迎大家的加入点击进入1045267283
问题先行,如何使用 CSS 实现下述滚动条效果?
就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。
在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。
OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?
分析需求
第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS