难以想象的纯 CSS 转动进度条结果_玖富娱乐主管


玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。

结论先行,怎样应用 CSS 完成下述转动条结果?

就是顶部黄色的转动进度条,跟着页面的转动进度而转变是非。

在继承浏览下文之前,你能够先缓一缓。实验思索一下上面的结果或许着手实验一下,不借助 JS ,可否奇妙的完成上述结果。

OK,继承。这个结果是我在营业开辟的过程当中碰到的一个相似的小问题。实在即使让我借助 Javascript ,我的第一回响反映也是,觉得很贫苦啊。以是我一向在想,有无能够只应用 CSS 完成这个结果呢?

 

剖析需求

第一眼看到这个结果,觉得这个追随转动动画,仅靠 CSS 是不能够完成的,由于这里触及了页面转动间隔的盘算。

若是想只用 CSS 完成,只能另辟蹊径,应用一些讨巧的要领。

好,下面就借助一些奇技淫巧,应用 CSS 一步一步完成这个结果。剖析一下难点:

  • 怎样得知用户以后转动页面的间隔而且关照顶部进度条?

一般剖析应当是如许的,然则这就陷入了传统的头脑。进度条就只是进度条,吸收页面转动间隔,转变宽度。若是页面转动和进度条是一个团体呢?

  

完成需求

不卖关子了,下面我们应用线性突变来完成这个功用。

假定我们的页面被包裹在 <body> 中,能够转动的是全部 body,给它增加如许一个从左下到到右上角的线性突变:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

那末,我们能够获得一个如许的结果:

Wow,黄色块的色彩转变实在已很能表达团体的进度了。实在到这里,智慧的同砚应当已晓得下面该怎样做了。

我们应用一个伪元素,把多出来的局部遮住:

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

为了轻易演示,我把上面白色底改成了黑色通明底,:

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。-

实际结果达成了如许:

眼尖的同砚能够会发明,如许以后,滑究竟的时刻,进度条并没有究竟:

究其原因,是由于 body 的线性突变高度设置了全部 body 的巨细,我们调解一下突变的高度:

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh   5px);
    background-repeat: no-repeat;
}

这里应用了 calc 进行了运算,减去了 100vh,也就是减去一个屏幕的高度,如许突变刚好在滑动究竟部的时刻与右上角贴合。

而  5px 则是转动进度条的高度,预留出 5px 的高度。再看看结果,圆满:

至此,这个需求就圆满完成拉,算是一个不错的小技能,完全的 Demo:

CodePen Demo -- 应用线性突变完成转动进度条

 

  

末了

实在这只是异常牛逼的突变异常小的一个技能。更多你想都想不到的风趣的 CSS 你能够来这里瞧瞧:

CSS-Inspiration -- CSS灵感

更多出色 CSS 技术文章汇总在我的 Github -- iCSS ,延续更新,迎接点个 star 定阅珍藏。

好了,本文到此结束,愿望对你有资助 :)

若是另有甚么疑问或许发起,能够多多交换,原创文章,文笔有限,才疏学浅,文中如有不正的地方,万望示知。

 

 

-玖富娱乐是一家为代理招商,直属主管信息发布为主的资讯网站,同时也兼顾玖富娱乐代理注册登录地址。