真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

/*對(duì)應(yīng)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%;
           }
       }

 = linear-gradient([ [  | to  ] ,]? [, ]+)
 = [left | right] || [top | bottom]
 =  [  |  ]?

.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%);   
}

.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;
    }

如下效果
 

接下來，在每一塊矩形中再構(gòu)造一個(gè)空心圓，先構(gòu)造右半邊，如下

.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;
    }

會(huì)看到下面的效果
 

由于在class：rect中，將overflow設(shè)置成了hidden，使得溢出的部分被遮蓋了，之后的效果實(shí)現(xiàn)與這個(gè)屬性關(guān)系也緊密相連。
 

如果沒有設(shè)置該屬性，效果就是這樣的。
 

那會(huì)發(fā)現(xiàn)有一部分被蓋住了，我們?cè)谑顾D(zhuǎn)45度即可

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

效果如下
 

我們實(shí)現(xiàn)動(dòng)畫效果的方式就是讓右半邊旋轉(zhuǎn)180度，然后左半邊旋轉(zhuǎn)180度，湊成完整的效果。
 

先給這右半邊設(shè)置動(dòng)畫效果，即一開始讓其旋轉(zhuǎn)45度，然后旋轉(zhuǎn)180度，由于這只是右半邊，所以在50%的時(shí)候就應(yīng)該旋轉(zhuǎn)完畢，之后一直保持不變。

.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中設(shè)置overflow：hidden的效果
 

這是在class rect中設(shè)置了overflow：hidden的效果
 

現(xiàn)在，我們就可以把左半邊也湊上了，同理，動(dòng)畫效果一開始先旋轉(zhuǎn)45度，調(diào)正，然后一直保持不變，到50%之后，再開始旋轉(zhuǎn)180度。這樣就與右半邊銜接上了。

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

這是整體的效果
 

可以調(diào)整角度或者調(diào)整顏色即可實(shí)現(xiàn)反向的效果。
 

我是調(diào)整了顏色就可以得到最開始的動(dòng)畫效果啦,下面是完整的代碼

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何利用CSS3實(shí)現(xiàn)進(jìn)度條”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!