CSS使用线性渐变实现滚动进度条

正在输入代码中

于 2019-01-11 06:41:42 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_26744901/article/details/86280968

版权

本文介绍了如何使用CSS线性渐变来实现一个滚动进度条的效果。通过实例代码展示了在HTML结构基础上，应用CSS样式达到动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果查看：https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100

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;
}


/**
 * Unrelated css
 */

h1 {
    font-size: 32px;
    line-height: 60px;
}

ul {
    margin-top: 30px;
}

p {
    font-size: 24px;
    line-height: 30px;
    margin-top: 30px;
}

HTML：

<h1>不可思议的纯 CSS 进度条效果</h1>

<p>在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的

最低0.47元/天解锁文章