css 实现进度条条形码和滚动

ゝ一纸荒年。 2022-05-31 04:25 258阅读 0赞

进度条实现隔色条形用到  background-imag

.progress-blue2{
        background-image: -webkit-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        background-image: -webkit-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        background-image: -moz-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        background-image: -o-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        background-image: -ms-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        
        background: linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%,rgba(27,95,179,1));
        width: 0%;
        height: 17px;
        border-radius: 20px;
        -webkit-transition:all 1s;
        -moz-transition:all 1s;
        -ms-transition:all 1s;
        -o-transition:all 1s;
        transition:all 1s;
    }

滚动代码

.bg-animation{
        -webkit-animation: progress-bar-stripes 2s linear infinite; 
        -moz-animation: progress-bar-stripes 2s linear infinite; 
        -ms-animation: progress-bar-stripes 2s linear infinite; 
        -o-animation: progress-bar-stripes 2s linear infinite; 
        animation: progress-bar-stripes 2s linear infinite; 
    }
    @-webkit-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
    @-moz-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
    @-o-keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}
    @keyframes progress-bar-stripes{from{background-position:0px 0}to{background-position:40px 0}}

走

![SouthEast][]

[SouthEast]: /images/20220531/04a7d4e3568740c9b8568ba4cfcb44de.png