主页   代码  

不可思议的纯 CSS 滚动进度条效果

时间:2019-01-09 18:25

实际效果:

scrollbar


css:

body {
    position: relative;
    padding: 50px;
    font-size: 24px;
    line-height: 30px;
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
    z-index: 1;
}

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

CodePen Demo -- 使用线性渐变实现滚动进度条

  评论





你还可以输入255

提交
返回顶部