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

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

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

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

看到了把，其实就是内容区域的背景色的渐变黄色部分，然后蒙层遮挡住露出顶部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. mysql的group_concat列转行函数

    SELECT auditor,sum(count) total, GROUP_CONCAT(type,'=', count) AS type_count FROM auditor_dm_ol GROU ...

  2. 操作mongodb

    MongoDB数据库是以k-v形式存储在磁盘上的. import pymongoclient = pymongo.MongoClient(host='10.29.3.40',port=27017)db ...

  3. 如何在Github创建repository

    第一步:登陆Github,点击new repository 第二步:输入相应内容创建 第三步,创建完成,如下.

  4. linux随

    Linux 1991芬兰大学生linus 安全 开源 免费 可靠 (堡垒机)(跳转机) 多用户 多任务 处理并发及速度比windows好很多 命令:ifconfig pwd ls -a -l -t(时 ...

  5. js判断终端以及APP应用判断

    **第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下:** <script type="text/javascript"& ...

  6. Flutter进阶—点击、拖动和其他手势

    Flutter中的手势系统有两个层次.第一层具有原始指针事件,其描述了穿过屏幕的指针(例如触摸.鼠标和触控笔)的位置和移动.第二层具有手势,其描述由一个或多个指针移动组成的语义动作. 指针指针代表用户 ...

  7. Oracle rac 监听状态异常远程连接问题解决（TNS-12541 TNS-12560 TNS-00511 Linux Error：111 ORA-12502）

    问题1现象 数据导出脚本执行失败,报错如下 ORA-12537 到服务器上查看,报错: [oracle@test ~]$ lsnrctl status LSNRCTL - Production on ...

  8. opencv学习之路（40）、人脸识别算法——EigenFace、FisherFace、LBPH

    一.人脸识别算法之特征脸方法(Eigenface) 1.原理介绍及数据收集 特征脸方法主要是基于PCA降维实现. 详细介绍和主要思想可以参考 http://blog.csdn.net/u0100066 ...

  9. cookie的存入和取出

    刚刚开始写页面没多久,因为登录注册写的是个tab切换,所以需要在点击登录的时候跳到登录页面,点击注册的时候跳转到注册页面,自己在网上找了一下,研究了一下cookie方法,现在把它记下来. 存入cook ...

  10. 在Linux(Debian)环境下搭建并运行GPU

    首先通过以下命令查看是否GPU驱动成功: 注意:需要在bash终端输入 import tensorflow as tf hello = tf.constant('Hello, TensorFlow!' ...