头部进度条"/>
模仿也是提高，纯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)；
敲一下就明白了，赶快试试把！！！！
转载于:.html
更多推荐
模仿也是提高,纯css小技巧实现头部进度条
发布评论