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

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

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

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

看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部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. c语言的一些易错知识积累

    1. #ifdef  和#if defined 的区别: 后者可以组成复杂的预编译条件,而如果判断的是单个宏定义的时候,两种用法的效果都是一样的. 2.#if 0 { code }#endif    ...

  2. Linux的邮件服务器配置

    一.邮件服务简介 1.电子邮件服务是Interne上最基本的服务之一,进入互联网的用户不需要任何纸张就可以方便地使用电子邮件来收发邮件 2.Internet上的电子邮件服务都是基于客户/服务器模式的 ...

  3. linux 分析java 线程状态

    将线程3117 的线程消息放到文件dump17中 jstack 13492 > dump17 分析线程 grep java.lang.Thread.State dump17 | awk '{pr ...

  4. Gitlab安装、汉化及使用

    环境:centos 关闭防火墙和selinux [root@Gitlab ~]# setenforce [root@Gitlab ~]# service iptables stop && ...

  5. jvm启动参数设置 -Dfile.encoding=UTF-8 解决freemark乱码

    今天一个spring boot应用windows跑起来后页面显示乱码,加上jvm启动参数为utf-8后,页面显示正常.

  6. Overture里镲片的使用

    在我们使用Overture进行作曲编曲时,往往会增添很多乐器设备来使我们的乐器更丰富,今天我们来一起看看Overture里镲片怎么使用以及它在Overture的什么位置呢? 镲片,是一种乐器,通常指爵 ...

  7. HDFS配置参数及优化之实战经验（Linux hdfs）

    HDFS优化之实战经验 Linux系统优化 一.禁止文件系统记录时间 Linux文件系统会记录文件创建.修改和访问操作的时间信息,这在读写操作频繁的应用中将带来不小的性能损失.在挂载文件系统时设置no ...

  8. HttpClient exception:ExceptionType:System.Threading.Tasks.TaskCanceledException: The operation was canceled. ---> System.IO.IOException: Unable to read data from the transport connection: Operation ca

    error msg: System.Threading.Tasks.TaskCanceledException: The operation was canceled. ---> System. ...

  9. docker run -v参数

    挂载目录(直接给例子吧) -v=[]:绑定挂载目录 宿主机绑定: -v<host>:<container>:[rw|ro] 在Docker中新建一个共享的卷: -v /< ...

  10. Multiple markers at this line - Missing semicolon时的解决方法

    Myeclipse的web项目中的js文件报Multiple markers at this line - Missing semicolon时的解决方法 MyEclipse的web项目中的js文件报 ...