模仿也是提高,纯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);
敲一下就明白了,赶快试试把!!!!
模仿也是提高,纯css小技巧实现头部进度条的更多相关文章
- 【CSS系列】网页头部进度条方式一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 常用的CSS小技巧
实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- CSS 小技巧 | 一行代码实现头像与国旗的融合
到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...
- 纯CSS小三角制作
无关的知识点 ① background-clip 属性规定背景的绘制区域. 1.padding-box:从padding区域(不含padding)开始向外裁剪背景. 2.border-box:从bor ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 用HTML、CSS、JS制作圆形进度条(无动画效果)
逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大 ...
随机推荐
- CentOS与Win7远程桌面互通
在CentOS上装上Rdesktop即可连接Windows,如下命令,第一次执行时报错,提示CredSSP required by server. [root@localhost ~]# rdeskt ...
- js filter 数组去重
let arr = [1, 2, 3, 10, 4, 5, 1, 3, 5]; let stateNumArr = arr.filter((item, index, array) => { re ...
- CSS3之calc()和box-sizing属性
box-sizing 属性 规定两个并排的带边框的框: 例子: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-si ...
- vector内存回收
1. vector所有的内存相关问题都可以归结于它的内存增长策略.vector有一个特点就是:内存空间只会增长不会减少.vector有两个函数,一个是capacity(),返回对象缓冲区(vector ...
- Windows环境下利用anaconda3安装python版本的Xgboost
网上有各种不同安装Xgboost的教程,但是有些教程对于一个新手来说,照着做安装成功是很困难的.本人也是新手,第一次安装Xgboost的时候,照着某个教程做,结果总是安装不上,甚至想到要放弃.后来经一 ...
- asp.net 获取网站根目录总结
.CSHttpContext.Current.Server.MapPath();//所在文件夹路径System.Web.HttpContext.Current.Request.PhysicalAppl ...
- 获取占用fd最大的前20个进程
for x in `ps -eF| awk '{ print $2 }'`;do echo `ls /proc/$x/fd 2> /dev/null | wc -l` $x `cat /proc ...
- 解决 Cannot uninstall 'pyparsing' 问题
参考 pyparsing 无法卸载导致安装 matplotlib 出错 解决 Cannot uninstall 'pyparsing' 问题 在安装 pydot 时遇到依赖 pyparsing 无法更 ...
- SAP ERP SD模块中维护销售人员
SAP ERP SD模块中维护销售人员信息并分配销售组织 分类: SAPHCM用户指南 在SAP ERP系统,销售和分销(SD)模块中需要创建销售人员(Sales Personnels)消息, ...
- javascript 删除 url 中指定参数,并返回 url
// 删除url中某个参数,并跳转function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin + ...