使用CSS3實(shí)現(xiàn)環(huán)形進(jìn)度條效果
我要評(píng)論進(jìn)度條效果如下：
整圓的效果處理會(huì)簡(jiǎn)單些，不完整環(huán)實(shí)現(xiàn)起來細(xì)節(jié)多點(diǎn)。下邊是實(shí)現(xiàn)邏輯和過程。
進(jìn)度條組成：
環(huán)形：兩種顏色進(jìn)度條，當(dāng)余量少于50%時(shí)進(jìn)度條顏色由綠色變?yōu)辄S色。進(jìn)度條結(jié)構(gòu)由兩個(gè)疊加環(huán)形組成；上疊加環(huán)形展示剩余量，深色；下疊加環(huán)形展示100%總量，淺色。
樣式實(shí)現(xiàn)：
1：畫一個(gè)方形，如圖中陰影部分所示：
2：方形中畫兩個(gè)等大均分方形的矩形，(注意每個(gè)矩形一定要設(shè)置：overflow:hidden)如圖中陰影部分所示：
3：進(jìn)度條由兩個(gè)疊加環(huán)形組成，所以第一步的方形中需要畫四個(gè)等大的矩形用來展示不同部分的環(huán)形。
4：每個(gè)矩形中畫一個(gè)和父級(jí)方形等大的方形，用來展示環(huán)形，左半矩形中的環(huán)形只設(shè)置上邊框和左邊框；右半矩形中的環(huán)形只設(shè)置上邊框和右邊框，如圖中陰影所示：
5：實(shí)現(xiàn)進(jìn)度條的動(dòng)態(tài)百分比進(jìn)度，使用css3的transform:rotate將上疊加環(huán)形根據(jù)實(shí)際百分比換算成實(shí)際的旋轉(zhuǎn)角度來實(shí)現(xiàn)。
當(dāng)剩余量大于50%時(shí)左側(cè)上疊加環(huán)形旋轉(zhuǎn)角度不用變，只有計(jì)算右測(cè)上疊加環(huán)形旋轉(zhuǎn)角度即可。
當(dāng)剩余量小于百分之50%時(shí)，左側(cè)上疊加環(huán)形旋轉(zhuǎn)時(shí)，就會(huì)將左半環(huán)形展示為完整的半環(huán)，此時(shí)就需要一個(gè)用來遮擋左側(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時(shí)需要使用遮罩進(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%,右半圓直接使用百分比計(jì)算所占部分即可
//注意：在半圓中計(jì)算百分比時(shí),要將百分比乘以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)計(jì)算需要*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)度條效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
css 實(shí)現(xiàn)圓形漸變進(jìn)度條效果的示例代碼
這篇文章主要介紹了css 實(shí)現(xiàn)圓形漸變進(jìn)度條效果的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-24
利用css3實(shí)現(xiàn)進(jìn)度條效果及動(dòng)態(tài)添加百分比
這篇文章主要介紹了利用css3實(shí)現(xiàn)進(jìn)度條效果及動(dòng)態(tài)添加百分比，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-06-01css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼
這篇文章主要介紹了css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼,有時(shí)候看一些不錯(cuò)的滾動(dòng)條效果不錯(cuò)，這里給大家分享一下如果用css實(shí)現(xiàn)2020-04-14
css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼
這篇文章主要介紹了css 進(jìn)度條的文字根據(jù)進(jìn)度漸變的示例代碼，介紹了進(jìn)度條里面的文字需要根據(jù)進(jìn)度的長(zhǎng)度而變化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一2018-01-09手把手教你用CSS實(shí)現(xiàn)帶箭頭的流程進(jìn)度條
這篇文章主要給大家介紹了利用CSS實(shí)現(xiàn)帶箭頭的流程進(jìn)度條大方法，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考價(jià)值，有需要的朋友們一起來看看吧。2017-01-22CSS實(shí)現(xiàn)進(jìn)度條和訂單進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了CSS進(jìn)度條和訂單進(jìn)度條的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-12- 純css做漂亮好看的進(jìn)度條，看了絕對(duì)不后悔。2010-05-31
- [html] <style> #graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#662009-03-30
僅僅使用 HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的方式匯總
這篇文章主要介紹了僅僅使用 HTML/CSS 實(shí)現(xiàn)各類進(jìn)度條的方式匯總,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-08
