模仿也是提高,纯css小技巧实现头部进度条
2024-10-01 08:34:34
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜。
快来感受一下把。(仔细看看头部黄色条的变化)
思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生的视觉效果。
再来欣赏一个图片,大概你就明白了。
看到了把,其实就是内容区域的背景色的渐变黄色部分,然后蒙层遮挡住露出顶部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);
敲一下就明白了,赶快试试把!!!!
最新文章
- 【译】PHP的变量实现(给PHP开发者的PHP源码-第三部分)
- JavaScript实现通过的集合类
- 基于jquery上的轻量级《数据模板解析》插件
- angularJS——自定义服务provider之$get
- salesforce 零基础开发入门学习(十一)sObject及Schema深入
- Android设置背景图像重复【整理自网络】
- Python字典增删操作技巧简述
- 实时数据采集传输软件LDM配置
- sysbench 安装 原创
- Linux学习之more命令
- Apache Shiro 核心概念
- spark集成hbase与hive数据转换与代码练习
- Hdfs读取文件到本地总结
- linux的时间问题
- mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )
- JEECG DataGridColumn dictionary使用问题
- JavaScript 作用域的误区
- 【转载】大连商品交易所-新套利撮合算法FAQ
- js中的假值
- 第13章 TCP编程(2)_TCP的连接和关闭过程
热门文章
- Android Studio环境安装
- TeamCity Agent安装
- Flutter 数据存储 加权限 sharedpreference, sqflite, file
- 根据RadioButtonList动态显示隐藏Div
- Derivative of Softmax Loss Function
- kubernets controller 和 CRD的扩展
- 2019.04.16打卡(java 数组)
- java代码块,静态代码块,静态变量,构造方法执行顺序
- 关于Tomcat启动时,长时间停在Initializing Spring root webApplicationContext处的原因
- canvas与svg