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

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

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

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

看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部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. vue的三种通信方式

    一 确定组件关系二 使用第一步确定的组件关系在下面找到使用方法 1 父子通信(子组件使用父组件数据渲染) a) 在 子组件 中添加props props: [自定义prop名字] b) 在子组件中把自 ...

  2. mysql时间相加函数DATE_ADD()

    mysql中的DATE_ADD()函数 1.定义:函数向日期添加指定的时间间隔. 2.语法:DATE_ADD(date,INTERVAL expr type) date 参数是合法的日期表达式.exp ...

  3. CustomScrollView

    body: CustomScrollView( slivers: [ SliverList( delegate: SliverChildBuilderDelegate( (context, int i ...

  4. setInterval中this

    今天使用react做钟表,自然用到了setInterval,但是出现this指向不明的问题. <html> <head> <meta charset="UTF- ...

  5. kubernets controller 和 CRD 具体组件分析

    (dlv) b k8s.io/sample-controller/pkg/client/informers/externalversions.(*sharedInformerFactory).Info ...

  6. IIC为什么要配置为开漏输出呢？

    开漏输出只能输出低电平,类似于三极管的集电极,要输出高电平需要上拉电阻才能输出 当集电极接上拉电阻后,(1)基极为高电平,三极管导通,集电极的电位就会被拉低: (2)基极为低电平,三极管不导通,集电极 ...

  7. 配置IPMI

    服务器电源管理 查看服务器电源状态 ipmitool chassis power status 关闭服务器电源 ipmitool chassis power off 打开服务器电源 ipmitool ...

  8. Python+MapReduce实现矩阵相乘

    算法原理 map阶段 在map阶段,需要做的是进行数据准备.把来自矩阵A的元素aij,标识成p条<key, value>的形式,key="i,k",(其中k=1,2,. ...

  9. 使用win10的开始屏幕，在系统中设置简洁、快捷桌面

    前几天入手了一个本本,由于之前电脑使用的柠檬桌面软件和现在本本的分辨率不适应,意外发现win10自带的开始屏幕整理桌面也是很有意思,再加上触摸板的手势,瞬间觉得整个电脑都清洁许多.废话少说,开始上料. ...

  10. java扫描文件。

    前言:一步一步来实现迷你ioc框架,前面的容器工厂也是一个铺垫,这次的扫描文件也是一个铺垫…… 需求:扫描当前项目下所有文件.包括文件夹下文件夹里面的文件.利用递归进行扫描 ScanFileUtil类 ...