CSS3實現進度條的倆種方法-css教學-PHP中文網

首頁

web前端

css教學

CSS3實現進度條的倆種方法

php中世界最好的语言

Mar 22, 2018 am 10:37 AM

css 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);
        }
    }

登入後複製