进度条动画,背景颜色渐变

//样式
<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
          background-color:antiquewhite;
        }
        .bigBox {
	        width: 600px;
	        height: 300px;
	        padding: 50px;
	        margin: 0px auto;
	        border-radius: 10px;
	        background: rgba(255,255,255,0.6);/*渐变*/
	        border: 1px solid #eee;
        }
        .bigBox .testone {
	        margin-bottom: 40px;
        }
        .testone {
	        width: 500px;
	        margin: 0px auto;
	        height: 61px;
	        border-radius: 5px;
	        background-color: #282f32;
	        padding: 4px 5px;
	        box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);
        }
        .colour {
	        height: 60px;
	        border-radius: 5px;
	        white-space: nowrap;
	        overflow: hidden;
	        margin-top: -9px;
        }
        .undernerth {
            width: 200%;
            background: url('../../Content/image/lines.svg') repeat-x;
            height: 120%;
            text-align: center;
            margin-top: -35px;
            overflow: hidden;
            border-radius: 50px;
            -webkit-animation: moveBars 1s linear infinite;
            -moz-animation: moveBars 1s linear infinite;
            -o-animation: moveBars 1s linear infinite;
            animation: moveBars 1s linear infinite;
            font-weight: bold;
            color: #fff;
            font-size: 18px;
            text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
        }
        .intnumber {
	        text-align: center;
	        font-family: '华文行楷', sans-serif;
	        font-weight: bold;
	        position: relative;
	        top: 9px;
	        font-size: 30px;
	        text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	        color: #fff;
	        z-index: 9999;
        }
        .green {
	        background-color: #8ac320;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;
        }
        .blue {
	        background-color: #20b9c3;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;
        }
        .red {
	        background-color: #dc6565;
	        box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;
        }
        @@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }/*webkit浏览器*//*也支持谷歌*/
        @@-moz-keyframes moveBars { 100% { margin-left: -180px; } }/*火狐*/
        @@-ms-keyframes moveBars { 100% { margin-left: -180px; } }/*IE*/
style>
//进度条盒子
<body>
<div class="bigBox">
        <div class="testone">
            <div class="colour green" style="width: 40%;">
                <div class="intnumber">
                    40%
                div>
                <div class="undernerth">div>
            div>
        div>
        <div class="testone">
            <div class="colour blue" style="width: 60%">
                <div class="intnumber">
                    60%
                div>
                <div class="undernerth">div>
            div>
        div>
        <div class="testone">
            <div class="colour red" style="width: 80%">
                <div class="intnumber">
                    80%
                div>
                <div class="undernerth">div>
            div>
        div>
    div>
body>

效果图显示:
进度条动画,背景颜色渐变_第1张图片

你可能感兴趣的:(专题)