進(jìn)度條效果如下：
整圓的效果處理會簡單些，不完整環(huán)實(shí)現(xiàn)起來細(xì)節(jié)多點(diǎn)。下邊是實(shí)現(xiàn)邏輯和過程。
進(jìn)度條組成：
環(huán)形：兩種顏色進(jìn)度條，當(dāng)余量少于50%時進(jìn)度條顏色由綠色變?yōu)辄S色。進(jìn)度條結(jié)構(gòu)由兩個疊加環(huán)形組成；上疊加環(huán)形展示剩余量，深色；下疊加環(huán)形展示100%總量，淺色。
樣式實(shí)現(xiàn)：
1：畫一個方形，如圖中陰影部分所示：
2：方形中畫兩個等大均分方形的矩形，(注意每個矩形一定要設(shè)置：overflow:hidden)如圖中陰影部分所示：
3：進(jìn)度條由兩個疊加環(huán)形組成，所以第一步的方形中需要畫四個等大的矩形用來展示不同部分的環(huán)形。
4：每個矩形中畫一個和父級方形等大的方形，用來展示環(huán)形，左半矩形中的環(huán)形只設(shè)置上邊框和左邊框；右半矩形中的環(huán)形只設(shè)置上邊框和右邊框，如圖中陰影所示：
5：實(shí)現(xiàn)進(jìn)度條的動態(tài)百分比進(jìn)度，使用css3的transform:rotate將上疊加環(huán)形根據(jù)實(shí)際百分比換算成實(shí)際的旋轉(zhuǎn)角度來實(shí)現(xiàn)。
當(dāng)剩余量大于50%時左側(cè)上疊加環(huán)形旋轉(zhuǎn)角度不用變，只有計算右測上疊加環(huán)形旋轉(zhuǎn)角度即可。
當(dāng)剩余量小于百分之50%時，左側(cè)上疊加環(huán)形旋轉(zhuǎn)時，就會將左半環(huán)形展示為完整的半環(huán)，此時就需要一個用來遮擋左側(cè)超出進(jìn)度范圍環(huán)形部分的左側(cè)環(huán)；如下圖所示:
html代碼如下：
<div class="progress_wrap js_halfClassNameObj"> <div class="right under"> <div class="circleProgress rightcircle"></div> </div> <div class="left under"> <div class="circleProgress leftcircle"></div> </div> <div class="right up"> <div class="circleProgress rightcircle js_progressRight" style="-webkit-transform:rotate('+circleData.rightRotate.toString()+'deg)"></div> </div> <div class="left up"> <div class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate('+circleData.leftRotate.toString()+'deg)"></div> </div> //percent小于50時需要使用遮罩進(jìn)行遮擋超出環(huán)形范圍部分 <div class="left up_left_cover js_giftLeftCover" style="display:'+circleData.leftCircleDisplay+'"> <div class="circleProgress leftcircle color_border_t_l04"></div> </div> <div class="num"> <div>剩余</div> <div class="js_giftPercent">'+circleData.percent+'%</div> </div></div>css代碼：
.progress_wrap{ position: relative; margin:0 0 0 .14rem; width:.92rem;height:.92rem; //little和more用來展示黃色和綠色的效果 &.little{ .under{ .rightcircle,.leftcircle{ border-top:$progress_border_under_little; } .rightcircle{ border-right:$progress_border_under_little; } .leftcircle{ border-left:$progress_border_under_little; } } .up{ .rightcircle,.leftcircle{ border-top:$progress_border_up_little; } .rightcircle{ border-right:$progress_border_up_little; } .leftcircle{ border-left:$progress_border_up_little; } } //用遮擋實(shí)現(xiàn)左側(cè)剩余百分比，遮住超出環(huán)形范圍部分；核心是使用同心圓進(jìn)行邊框進(jìn)行遮擋 .up_left_cover{ width:.47rem;height:.92rem; .leftcircle{ top:-.02rem; width:.74rem;height:.74rem; border:.11rem solid transparent; border-top:$progress_border_up_left_cover_little; border-left:$progress_border_up_left_cover_little; //實(shí)際值為195deg,被遮擋環(huán)顏色值深有光暈,需要將角度進(jìn)行微調(diào)（-191deg）進(jìn)行完全遮擋 -webkit-transform:rotate(-191deg); } } } &.more{ .under{ .rightcircle,.leftcircle{ border-top:$progress_border_under; } .rightcircle{ border-right:$progress_border_under; } .leftcircle{ border-left:$progress_border_under; } } .up{ .rightcircle,.leftcircle{ border-top:$progress_border_up; } .rightcircle{ border-right:$progress_border_up; } .leftcircle{ border-left:$progress_border_up; } } } .right,.left{ position: absolute;top:0;overflow:hidden; width:.46rem;height:.92rem; .circleProgress{ position: absolute; top:0; width: .78rem; height: .78rem; border:.07rem solid transparent; border-radius: 50%; } .rightcircle{ right:0; -webkit-transform: rotate(15deg); } .leftcircle{ left:0; -webkit-transform: rotate(-15deg); } } .right{ right:0; } .left{ left:0; } .num{ position: absolute;left:50%;top:50%; width:.5rem; transform:translate(-50%,-50%); font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem; } }js代碼：
function giftCircleProgressFn(per){ var circleData = {}; var percent = parseInt(per); //領(lǐng)取進(jìn)度環(huán)形顏色className var halfClassName = percent<50?"little":"more"; //左半環(huán)遮罩層顯示樣式狀態(tài) var leftCircleDisplay = percent<50?"block":"none"; var leftRotate = 0; var rightRotate = 0; //以50%為界限;<50%:右半圓占比為0,左半圓需要使用遮罩進(jìn)行遮擋,展示剩余部分 // >50%:左半圓占比100%,右半圓直接使用百分比計算所占部分即可 //注意：在半圓中計算百分比時,要將百分比乘以2。 if(percent<50){ leftRotate = -15-180+150*(percent*2)/100; rightRotate = -135; }else{ leftRotate = -15; rightRotate = -135+(150*((percent-50)*2)/100); //比例在半環(huán)計算需要*2倍 } circleData = { leftRotate:leftRotate, //左半環(huán)進(jìn)度 rightRotate:rightRotate, //右半環(huán)進(jìn)度 halfClassName:halfClassName, //50% 進(jìn)度環(huán) 變色 leftCircleDisplay:leftCircleDisplay, //左半環(huán)遮罩 percent:per //進(jìn)度百分比 } return circleData } 環(huán)形旋轉(zhuǎn)角度換算需要根據(jù)不同需求進(jìn)行微調(diào)即可。
總結(jié)
以上所述是小編給大家介紹的使用CSS3實(shí)現(xiàn)環(huán)形進(jìn)度條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
