css3 进度条

50%
50%
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>进度条</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <style>
            .p1 {
                width: 500px;
                height: 20px;
                border-radius: 4px;
                overflow: hidden;
                text-align: center;
                position: relative;
                border:1px solid red;
                color:red;
            }
            .p2 {
                background: red;
                height: 100%;
                width:100%;
                color:#fff;
                position: absolute;
                left: 0;
                top: 0;
                clip:rect(0px,252px,20px,0px);
                background-image: -webkit-gradient(linear, 0 0, 100% 100%, 
                    color-stop(.25, rgba(255, 255, 255, .3)), 
                    color-stop(.25, transparent), 
                    color-stop(.5, transparent), 
                    color-stop(.5, rgba(255, 255, 255, .3)), 
                    color-stop(.75, rgba(255, 255, 255, .3)), 
                    color-stop(.75, transparent));
                -webkit-background-size: 50px 50px;
                -webkit-animation: move 10s linear infinite;
            }
            @-webkit-keyframes move {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 500px 0;
                }
            }
        </style>
    </head>

    <body>
        <div class="p1">
            <div class="p2">50%</div>50%
        </div>

    </body>

</html>

2、

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>进度条</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
    .progress-bar {
        height: 25px;
        width: 350px;
        margin: 50px 0;
        border-radius: 5px;
        position:relative;
        text-align:center;
        line-height:25px;
        border:1px solid red;
    }
    
    .stripes span {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        color:white;
        background-color: red;
        clip:rect(0px,252px,25px,0px);
        background-size: 50px 50px;
        background-image: -webkit-linear-gradient( -45deg, 
            rgba(255, 255, 255, .3) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, .3) 50%, 
            rgba(255, 255, 255, .3) 75%, 
            transparent 75%, 
            transparent 100%);
        -webkit-animation: animate-stripes 3s linear infinite;
    }
    
    @-webkit-keyframes animate-stripes {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 100px 0;
        }
    }
    </style>
</head>

<body>
    <div class="progress-bar stripes">
        <span>50%</span>50%
    </div>
</body>

</html>

 

你可能感兴趣的:(css3)