進度條我們是常常可以看見的，但是進度條要怎麼實現呢？我們上一篇文章（css3如何實現進度條？css3中進度條的實現方法介紹）中已經簡單的說過了css3實現長形進度條的方法，今天的這篇文章就給大家來介紹一下css3圓形進度條的實作方法，有興趣的夥伴可以看看。
我們都知道做出一個靜態的圓環形是很簡單的，像下面這樣就可以了
<!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圓形效果如下：
但是圓形的進度條是一個動態的效果，所以就需要考慮很多了，首先我們來看一下css圓形進度條的實現思路：
我們可以把整個圓環分成左右兩部分；左右兩個半圓都旋轉，比如先讓右邊半圓旋轉再接上左邊半圓然後左邊半圓旋轉，這樣就可以實現了整個圓環的旋轉，就是一個圓形進度條了。
下面我們就來看看css3圓形進度條具體的實作方法。
首先我們來看css3右邊半圓的實作
<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); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}css3右邊半圓的實作效果如下：
css3左半圓實作和右半圓剛好相反，程式碼如下：
.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); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}css3左半圓效果如下：
兩個半圓都實作出來了，接下來只需要將兩個半圓拼接在一起就可以實現css3圓形進度條的效果了
css3實現圓形進度條代碼如下：
<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中圓形進度條效果如下：
這篇文章到這裡就全部結束了，更多精彩內容大家可以追蹤php中文網！ ！ ！
以上是css3如何實現圓形進度條？ css3中圓形進度條的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
