溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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中圓形進度條效果如下：
感謝各位的閱讀！關于css3實現圓形進度的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
