模仿也是提高，纯css小技巧实现头部进度条

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

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

 

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

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

 

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

<style>
    body{
         background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
         background-size: 100% calc(100% - 100vh + 5px);
         background-repeat: no-repeat;
    }
    body::after{
        content:"";
        position: fixed;
        top:5px;
        left: 0;
        right: 0;
        bottom:0;
        background: #fff;/* 这里设置白色就好了 */
        z-index: -1;
    }
    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)；

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

 

posted on 2019-01-11 15:48  lily_w  阅读(270)  评论(0)  编辑  收藏  举报