溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3實現(xiàn)圓形進度的方法是什么

發(fā)布時間：2020-09-14 10:25:24 來源：億速云 閱讀：758 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)css3實現(xiàn)圓形進度的方法是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

我們都知道做出一個靜態(tài)的圓環(huán)形是很簡單的，像下面這樣就可以了

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
    width: 160px;
    height: 160px;
    border:20px solid orange;
    border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

css3圓形效果如下：

css3實現(xiàn)圓形進度的方法是什么

但是圓形的進度條是一個動態(tài)的效果，所以就需要考慮很多了，首先我們來看一下css圓形進度條的實現(xiàn)思路：

我們可以把整個圓環(huán)分成左右兩部分；左右兩個半圓都旋轉(zhuǎn)，比如先讓右邊半圓旋轉(zhuǎn)再接上左邊半圓然后左邊半圓旋轉(zhuǎn)，這樣就可以實現(xiàn)了整個圓環(huán)的旋轉(zhuǎn)，就是一個圓形進度條了。

下面我們就來看看css3圓形進度條具體的實現(xiàn)方法。

首先我們來看css3右邊半圓的實現(xiàn)

<div class="right">
    <div class="rightcircle"></div>
</div>
.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    right: 0;
    border-top:20px solid lightblue;
    border-right:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋轉(zhuǎn)45度 */
}
/* 這里僅考慮webkit內(nèi)核的情況，您可以寫完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 動畫名稱 */
    -webkit-animation-duration: 5s;  /* 完成一個動畫需要的時間 */
    -webkit-animation-timing-function: linear; /* 動畫播放的方式，linear是勻速變化 */
    -webkit-animation-iteration-count: infinite;  /* 動畫播放的次數(shù)，infinite是無限次數(shù) */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

css3右邊半圓的實現(xiàn)效果如下：

css3實現(xiàn)圓形進度的方法是什么

css3左半圓實現(xiàn)和右半圓正好相反，代碼如下：

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    bottom:0;
    left: 0;
    border-bottom:20px solid lightblue;
    border-left:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋轉(zhuǎn)45度 */
}
/* 這里僅考慮webkit內(nèi)核的情況，您可以寫完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 動畫名稱 */
    -webkit-animation-duration: 5s;  /* 完成一個動畫需要的時間 */
    -webkit-animation-timing-function: linear; /* 動畫播放的方式，linear是勻速變化 */
    -webkit-animation-iteration-count: infinite;  /* 動畫播放的次數(shù)，infinite是無限次數(shù) */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

css3左半圓效果如下：

css3實現(xiàn)圓形進度的方法是什么

兩個半圓都實現(xiàn)出來了，接下來只需要將兩個半圓拼接在一起就可以實現(xiàn)css3圓形進度條的效果了

css3實現(xiàn)圓形進度條代碼如下：

<div class="circle_process">
    <div class="wrapper right">
        <div class="circle rightcircle"></div>
    </div>
    <div class="wrapper left">
        <div class="circle leftcircle" id="leftcircle"></div>
    </div>
</div>
 .circle_process{
        position: relative;
        width: 199px;
        height : 200px;
    }
    .circle_process .wrapper{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .circle_process .right{
        right:0;
    }
    .circle_process .left{
        left:0;
    }
    .circle_process .circle{
        width: 160px;
        height: 160px;
        border:20px solid transparent;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform : rotate(-135deg);
    }
    .circle_process .rightcircle{
        border-top:20px solid lightblue;
        border-right:20px solid lightblue;
        right:0;
        -webkit-animation: circle_right 5s linear infinite;
    }
    .circle_process .leftcircle{
        border-bottom:20px solid lightblue;
        border-left:20px solid lightblue;
        left:0;
        -webkit-animation: circle_left 5s linear infinite;
    }
    @-webkit-keyframes circle_right{
        0%{
            -webkit-transform: rotate(-135deg);
        }
        50%,100%{
            -webkit-transform: rotate(45deg);
        }
    }
    @-webkit-keyframes circle_left{
        0%,50%{
            -webkit-transform: rotate(-135deg);
        }
        100%{
            -webkit-transform: rotate(45deg);
        }
    }

css3中圓形進度條效果如下：

css3實現(xiàn)圓形進度的方法是什么

感謝各位的閱讀！關(guān)于css3實現(xiàn)圓形進度的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手