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

时间:2024-07-26 15:05:02

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

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

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

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

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

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

看到了把,其实就是内容区域的背景色的渐变黄色部分,然后蒙层遮挡住露出顶部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);

敲一下就明白了,赶快试试把!!!!