css 实现进度条 整理

效果

代码

//html
<div id="test"></div>

//css
div{
        --p:1%;
        --c:#0ff;    /*自定义属性*/
        height: 10px;
        border: 1px solid;
        border-radius: 10px;
        background-image: linear-gradient(var(--c),var(--c));
        background-repeat: no-repeat;
        background-size: 0;
        animation: move 1.5s linear;
        /*animation: move 1.5s linear infinite;*/
        /*animation-play-state:paused;*//*动画暂停*/
        animate-delay:-1s;
        --parent:90%;
        animation-fill-mode:forwards; /*设定动画完成后的状态，默认是none 设为forwards 就可以在动画完成后定格在动画最后一帧*/
    }
    //定义动画
    @keyframes move {
        to{
             background-size: var(--parent);
         }
    }

//可以用js来更改自定义属性
document.getElementById('test').style.setProperty('--parent','100%');

大牛推荐 juejin.cn/user/788205…