java如何画百分比圆环_css实现百分比环形图（圆环图）和一点细节
实现的效果
实现不难，但是有一点细节，所以写一下。
css：
//最外面的一个div
.annulusBasics {
width : 94px;
height : 94px;
position : relative;
overflow : hidden;
border-radius: 50%;
text-align : center;
z-index : 1;
}
//圆环中间的白色
.centerCircle {
position : absolute;
z-index : 10;
border-radius: 50%;
width : 71px;
height : 71px;
background : #fff;
transform : translate(12px, 12px);
line-height : 71px;
}
//圆环百分比时出现圆环边框的颜色
.annulusOuter {
position : absolute;
top : 0;
left : 0;
width : 94px;
height : 94px;
border : 12px solid #FF7F69;
border-radius: 50%;
}
//左边遮住圆环颜色的长方形
.leftRectangle {
position : absolute;
background : #EBEEF5;
width : 47px;
height : 94px;
transform-origin: right;
}
//右边遮住圆环颜色的长方形
.rightRectangle {
position : absolute;
background : #EBEEF5;
transform-origin: left;
left : 47px;
width : 47px;
height : 94px;
transform : rotate(0deg);
}
//弥补hidde在移动端失效的圆环
.repairAnnulus{
position : absolute;
width : 94px;
height : 94px;
z-index : 20;
border-radius: 50%;
box-sizing : content-box;
//改外边框的时候，位置也要改下
border : 20px solid #ffffff;
top : -20px;
left : -20px;
}
稍微提一下，我上面的代码是基于为box-sizing默为 border-box 的情况下，所以直接复制的时候要注意下。
记录的第一个点：
为什么写一个.annulusOuter作为圆环的边框颜色，而不是直接在.annulusBasics写一个background作为圆环的背景色。是因为用背景色会造成像光晕一样的效果：
我把.annulusBasics的background设置为黑色可以看得明显一点。
记录的第二个点：
在pc端上不会出现这个问题，但是在移动端的时候，会出现overflow: hidden失效的情况，所以加了一个.repairAnnulus
移动端上失效的效果
下面是react中的JSX，根据classWrongScore不同的值呈现不同的效果
{(Math.floor(classWrongScore * 1000) / 10).toFixed()}%{classWrongScore > 0.5 ?
{classWrongScore < 0.5 ?
:
{/*加下面一个div是因为hidde在移动端失效导致样式不对*/}
下面是html，超过50%的时候，修改.leftRectangle的角度，小于50%的时候，修改.rightRectangle的角度。
40%{/*加下面一个div是因为hidde在移动端失效导致样式不对*/}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！