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在移动端失效导致样式不对*/}