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

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

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

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

看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部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. 宝塔安装swoole

    新建文件夹 mkdir swoole 切入到文件夹中,进行下载安装包 wget http://pecl.php.net/get/swoole-4.3.2.tgz 解压 tar -zxvf swoole ...

  2. mysql之统一刷表

    统一刷表: update report set pdfPath= CONCAT(pdfPath ,substring_index(fileLink, '\\', -1)); update report ...

  3. Linux虚拟机配置（新猿旺学习总结）

    Linux系统环境部署 安装VMware虚拟机 选择安装位置要预留出20G虚拟机空间点击VM虚拟机安装包à一路下一步直至安装完成à进入界面 创建虚拟机 选择典型à找到安装镜像文件à安装机名称和位置选择 ...

  4. Nginx try_files 指令

    Nginx try_files 指令 按顺序检查文件是否存在,返回第一个找到的文件.结尾的斜线表示为文件夹 -$uri/.如果所有的文件都找不到,会进行一个内部重定向到最后一个参数. 务必确认只有最后 ...

  5. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  6. {408} client block at 0x005D4D10, subtype 0, 64 bytes long.a CButton object at $005D4D10, 64 bytes long

    现象:mfc动态生成了很多控件,new的,退出时也delet了,但是还是出现了标题的错误 解决:在任何可以执行的地方加代码: CMFCVisualManager ::SetDefaultManager ...

  7. Bigger-Mai 养成计划，前端基础学习之CSS

    在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style ...

  8. Dockerfile详解及优化

    Dockerfile详解 0. Dockerfile的作用 docker可以根据Dockerfile中的指令来构建docker镜像.Dockerfile是一个文本文件,其应当包含用户想要构建一个镜像的 ...

  9. Redis集群 - Sentinel与RAFT算法

    引入   在主从模型中讲到 一旦Master宕机失效,需要手动将Slave角色提升为Master,否则这个子集群将不可用.   这个缺陷使得系统可用性大大降低.因此Redis专门提供了一个哨兵机制来实 ...

  10. 手写JavaScript常用的函数

    一.bind.call.apply函数的实现 改变函数的执行上下文中的this指向,但不执行该函数(位于Function构造函数的原型对象上的方法) Function.prototype.myBind ...