CSS3實現進度條的倆種方法

這次給大家帶來CSS3實現進度條的倆種方法，CSS3實現進度條的注意事項有哪些，下面就是實戰案例，一起來看一下。

如下：

第一種姿勢如下

先上代碼

<p id="progress">      <span></span></p>

/*對應CSS*/    #progress{           width: 300px;           height: 30px;           border:1px solid #ccc;           border-radius: 15px;           overflow: hidden;  /*注意這裡*/           box-shadow: 0 0 5px 0px #ddd inset;    }              #progress span {           display: inline-block;           width: 70%;           height: 100%;                  background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);               background-size: 60px 30px;           text-align: center;           color:#fff;           animation:load 3s ease-in;     }     @keyframes load{           0%{               width: 0%;           }           100%{               width:70%;           }       }

上方的漸層色使用了css3中的 linear-gradient

linear-gradient文法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)<side-or-corner> = [left | right] || [top | bottom]<color-stop> = <color> [ <length> | <percentage> ]?

• angle：用角度值指定漸層的方向（或角度）。

• to left：設定漸層為從右至左。相當於: 270deg

• to right：設定漸層從左至右。相當於: 90deg

• to top：設定漸層從下到上。相當於: 0deg

• to bottom：設定漸層從上到下。相當於: 180deg。這是預設值，等同於留空不寫。

• color-stop： 用於指定漸層的起止顏色：

• color：指定顏色。

• length：用長度值指定起止色位置。不允許負值

• percentage：用百分比指定起止色位置。

栗子：

.test1{    background: linear-gradient(#EA2000, #E5A399);}.test2 {    background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%);}.test3 {    background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4);}.test4{    background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);   }

：

動畫通過keyframes來實現，通過改變span的寬度來實現進度的效果，素不素hin簡單？！

現在的進度條效果是只有70%的效果，只要改變width的值就可以啦，就像，一致改成某個值即可。

第二種姿勢

首先，構造好一個正方形的p，將這個正方形對稱分成左右兩塊，如下

這裡構造的是一個200px 200px的一個正方形，分成兩塊100px200px的矩形。

<p class="progress2">        <p class="rect right">        </p>                                       <p class="rect left">        </p> </p>

.progress2{        width: 200px;        height: 200px;        margin: 100px auto;        position: relative;        border:1px solid #ddd;    }       .rect{        width: 100px;        height: 200px;        position: absolute;        top:0;        overflow: hidden; /*注意這裡*/    }    .right{        right:0;    }    .left{        left:0;    }

如下效果

接下來，在每一塊矩形中再構造一個空心圓，先構造右半邊，如下

<p class="progress2">        <p class="rect right">            <p class="circle rightcircle"></p>        </p>                                       <p class="rect left">                    </p> </p>

.circle{        width: 160px;        height: 160px;        border:20px solid #ccc;        border-radius: 50%;        position: absolute;        top:0;    }    .rightcircle{        border-top:20px solid rgb(41,137,216);        border-right:20px solid rgb(41,137,216);        right:0;    }

會看到下面的效果

由於在class：rect中，將overflow設定成了hidden，使得溢出的部分被遮蓋了，之後的效果實現與這個屬性關聯性也緊密相連。

如果沒有設定該屬性，效果就是這樣的。

那會發現有一部分被蓋住了，我們在使他旋轉45度即可

.circle{        width: 160px;        height: 160px;        border:20px solid #ccc;        border-radius: 50%;        position: absolute;        top:0;        transform: rotate(45deg); /*注意這裡*/    }

效果如下

我們實現動畫效果的方式就是讓右半邊旋轉180度，然後左半邊旋轉180度，湊成完整的效果。

先給這右半邊設定動畫效果，即一開始讓其旋轉45度，然後旋轉180度，由於這隻是右半邊，所以在50%的時候就應該旋轉完畢，之後一直保持不變。

.rightcircle{        border-top:20px solid rgb(41,137,216);        border-right:20px solid rgb(41,137,216);        right:0;        animation: load_right 5s linear infinite;    }    @keyframes load_right{        0%{            transform: rotate(45deg);        }        50%{            transform: rotate(225deg);        }        100%{            transform: rotate(225deg);        }    }

這是沒有在class rect中設定overflow：hidden的效果

這是在class rect中設定了overflow：hidden的效果

現在，我們就可以把左半邊也湊上了，同理，動畫效果一開始先旋轉45度，調正，然後一直保持不變，到50%之後，再開始旋轉180度。這樣就與右半邊銜接上了。

<p class="progress2">        <p class="rect right">            <p class="circle rightcircle"></p>        </p>                                       <p class="rect left">            <p class="circle leftcircle"></p>        </p> </p>

.leftcircle{        border-bottom:20px solid rgb(41,137,216);        border-left:20px solid rgb(41,137,216);        left:0;        animation: load_left 5s linear infinite;    }    @keyframes load_left{        0%{            transform: rotate(45deg);        }        50%{            transform: rotate(45deg);        }        100%{            transform: rotate(225deg);        }    }

這是整體的效果

可以調整角度或者調整顏色即可實現反向的效果。

我是調整了顏色就可以得到最開始的動畫效果啦,下面是完整的代碼

<p class="progress2">        <p class="rect right">            <p class="circle rightcircle"></p>        </p>                                       <p class="rect left">            <p class="circle leftcircle"></p>        </p> </p>

.progress2{        width: 200px;        height: 200px;        margin: 100px auto;        position: relative;    }       .rect{        width: 100px;        height: 200px;        position: absolute;        top:0;        overflow: hidden;    }    .right{        right:0;    }    .left{        left:0;    }    .circle{        width: 160px;        height: 160px;        border:20px solid rgb(41,137,216);        border-radius: 50%;        position: absolute;        top:0;        transform: rotate(45deg);    }    .rightcircle{        border-top:20px solid #ccc;        border-right:20px solid #ccc;        right:0;        animation: load_right 5s linear infinite;    }    .leftcircle{        border-bottom:20px solid #ccc;        border-left:20px solid #ccc;        left:0;        animation: load_left 5s linear infinite;    }    @keyframes load_right{        0%{            transform: rotate(45deg);        }        50%{            transform: rotate(225deg);        }        100%{            transform: rotate(225deg);        }    }    @keyframes load_left{        0%{            transform: rotate(45deg);        }        50%{            transform: rotate(45deg);        }        100%{            transform: rotate(225deg);        }    }

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

用CSS3實現頭像旋轉效動畫

css的background-attachment進階使用方法

css做出波紋動畫