纯CSS实现进度条滚动效果，不可思议！

2013-05-28 分类：网站建设

如何实现网页顶部展现的滚动进度条随着页面的滚动进度而变化长短这样的效果？很多网站制作开发人员看到这样的效果时，第一反应就是借助Javascript，但是这样简单的效果用JS来实现是很麻烦的，我们可以用CSS来实现以下进度条的滚动效果。

首先，拿的这样的效果时，我们要先分析需求，考虑一个问题，如何得知用户当前滚动页面的距离并且通知顶部进度条？正常分析应该是这样的，但是这就陷入了传统的思维。进度条就只是进度条，接收页面滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？

假设我们的页面被包裹在 <body> 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {

background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%)；

background-repeat: no-repeat;}

那么，我们可以得到一个这样的效果：

黄色块的颜色变化其实已经很能表达整体的进度了。接下来我们运用一个伪元素，把多出来的部分遮住：

body::after {

content: "";

position: fixed;

top: 5px;

left: 0;

bottom: 0;

right: 0;

background: #fff;

z-index: -1;}

这样一来，进度条的滚动效果大致就已经完成了。用纯CSS来实现进度条效果，可以说是很秀的了。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容