最终效果 进度条高度可以调整
主要是用根基css的渐变完成的
第一步,给body添加渐变色 (从左上角一直拉到右下角)
效果如下
第二步,给body添加后面添加空元素,使他固定定位,并且设置他的背景颜色,并且使z-index=-1不然内容会被遮住
效果如下
第三步， 你会发现滚读条到底了进度条还没有走完所以需要给body使用 calc()函数进行计算
效果如下
完成
可复制代码
body {
background-image: linear-gradient(to right top,red 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
body::after{
content:'';
position: fixed;
top: 10px;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
z-index: -1;
}
