html:
1 <div class="circle"> 2 <div class="percent-circle percent-circle-left"> 3 <div class="left-content"></div> 4 </div> 5 <div class="percent-circle percent-circle-right"> 6 <div class="right-content"></div> 7 </div> 8 <div class="c-c-inside"> 9 8.2 10 </div> 11 </div>
css:
.circle {
position: relative;
margin: 0 auto;
width: 88px;
height: 88px;
}
.percent-circle {
position: absolute;
height: 100%;
background: #4a9bff;
overflow: hidden;
}
.percent-circle-left {
left: 0;
width: 44px;
border-radius: 44px 0 0 44px/44px 0 0 44px;
}
.left-content {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: right center;
border-radius: 50px 0 0 50px/50px 0 0 50px;
background: #e5edff;
/* transform: rotate(90deg); */ /* 角度調節 */
}
.percent-circle-right {
right: 0;
width: 44px;
transform-origin: right center;
border-radius: 0 44px 44px 0/0 44px 44px 0;
}
.right-content {
position: absolute;
content: '';
width: 100%;
height: 100%;
transform-origin: left center;
border-radius: 0 44px 44px 0/0 44px 44px 0;
background: #e5edff;
/* transform: rotate(180deg); */ /* 角度調節 */
}
.c-c-inside {
position: absolute;
top: 14px;
left: 14px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100%;
font-size: 25px;
color: #4a9bff;
}
效果圖：
樣式實現思路：
1：畫一個方形，如圖中陰影部分所示：
2：方形中畫兩個等大均分方形的矩形，(注意每個矩形一定要設置：overflow:hidden)如圖中陰影部分所示：
3：進度條由兩個疊加環形組成，所以第一步的方形中需要畫四個等大的矩形用來展示不同部分的環形。
4：每個矩形中畫一個和父級方形等大的方形，用來展示環形，左半矩形中的環形只設置上邊框和左邊框；右半矩形中的環形只設置上邊框和右邊框，如圖中陰影所示：
5：實現進度條的動態百分比進度，使用css3的transform:rotate將上疊加環形根據實際百分比換算成實際的旋轉角度來實現。
當剩余量大於50%時左側上疊加環形旋轉角度不用變，只有計算右測上疊加環形旋轉角度即可。
當剩余量小於百分之50%時，左側上疊加環形旋轉時，就會將左半環形展示為完整的半環，此時就需要一個用來遮擋左側超出進度范圍環形部分的左側環；如下圖所示:
