刚开始的时候我也觉得不可能，但是就是这么神奇，总有大神给你意想不到的惊喜。

快来感受一下把。（仔细看看头部黄色条的变化）

思考一下啊，怎么出现的那，其实作者使用了一点小技巧，那就是背景色渐变和遮挡产生的视觉效果。

再来欣赏一个图片，大概你就明白了。

看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部5px，显示背景色，产生的进度条效果。来代码

<style>

    body{

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

         background-size: % calc(% - 100vh + 5px);

         background-repeat: no-repeat;

    }

    body::after{

        content:"";

        position: fixed;

        top:5px;

        left: ;

        right: ;

        bottom:;

        background: #fff;/* 这里设置白色就好了 */

        z-index: -;

    }

    P{

        font-size: 100px;

    }

</style>

<body>
<div class="pic-wrap">

<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>
<p>好好好好好好好好好好好好好好好</p>

</div>
</body>

这个background-size为什么这么设置啊？

就是根据你滚动的距离设置的，因为背景色的高度肯定要跟你滚动的距离保持一致啊；

我这里就是超出可视区的部分，才会产生滚动条，所以是(100% - 100vh + 5px)；

敲一下就明白了，赶快试试把！！！！

模仿也是提高，纯css小技巧实现头部进度条的更多相关文章

  1. 【CSS系列】网页头部进度条方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  3. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  4. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  5. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  6. CSS 小技巧 | 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  7. 纯CSS小三角制作

    无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从bor ...

  8. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  9. 用HTML、CSS、JS制作圆形进度条（无动画效果）

    逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果:   然后我们再用一个比底圆小的圆去覆盖这个大 ...

随机推荐

  1. CentOS与Win7远程桌面互通

    在CentOS上装上Rdesktop即可连接Windows,如下命令,第一次执行时报错,提示CredSSP required by server. [root@localhost ~]# rdeskt ...

  2. js filter 数组去重

    let arr = [1, 2, 3, 10, 4, 5, 1, 3, 5]; let stateNumArr = arr.filter((item, index, array) => { re ...

  3. CSS3之calc()和box-sizing属性

    box-sizing 属性 规定两个并排的带边框的框: 例子: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-si ...

  4. vector内存回收

    1. vector所有的内存相关问题都可以归结于它的内存增长策略.vector有一个特点就是:内存空间只会增长不会减少.vector有两个函数,一个是capacity(),返回对象缓冲区(vector ...

  5. Windows环境下利用anaconda3安装python版本的Xgboost

    网上有各种不同安装Xgboost的教程,但是有些教程对于一个新手来说,照着做安装成功是很困难的.本人也是新手,第一次安装Xgboost的时候,照着某个教程做,结果总是安装不上,甚至想到要放弃.后来经一 ...

  6. asp.net 获取网站根目录总结

    .CSHttpContext.Current.Server.MapPath();//所在文件夹路径System.Web.HttpContext.Current.Request.PhysicalAppl ...

  7. 获取占用fd最大的前20个进程

    for x in `ps -eF| awk '{ print $2 }'`;do echo `ls /proc/$x/fd 2> /dev/null | wc -l` $x `cat /proc ...

  8. 解决 Cannot uninstall 'pyparsing' 问题

    参考 pyparsing 无法卸载导致安装 matplotlib 出错 解决 Cannot uninstall 'pyparsing' 问题 在安装 pydot 时遇到依赖 pyparsing 无法更 ...

  9. SAP ERP SD模块中维护销售人员

    SAP ERP SD模块中维护销售人员信息并分配销售组织   分类: SAPHCM用户指南   在SAP ERP系统,销售和分销(SD)模块中需要创建销售人员(Sales Personnels)消息, ...

  10. javascript 删除 url 中指定参数,并返回 url

    // 删除url中某个参数,并跳转function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin + ...