實(shí)現(xiàn)的效果

實(shí)現(xiàn)不難，但是有一點(diǎn)細(xì)節(jié)，所以寫一下。

css：

//最外面的一個(gè)div
.annulusBasics {
  width        : 94px;
  height       : 94px;
  position     : relative;
  overflow     : hidden;
  border-radius: 50%;
  text-align   : center;
  z-index      : 1;
}
//圓環(huán)中間的白色
.centerCircle {
  position     : absolute;
  z-index      : 10;
  border-radius: 50%;
  width        : 71px;
  height       : 71px;
  background   : #fff;
  transform    : translate(12px, 12px);
  line-height  : 71px;
}
 //圓環(huán)百分比時(shí)出現(xiàn)圓環(huán)邊框的顏色
.annulusOuter {
  position     : absolute;
  top          : 0;
  left         : 0;
  width        : 94px;
  height       : 94px;
  border       : 12px solid #FF7F69;
  border-radius: 50%;
}
//左邊遮住圓環(huán)顏色的長方形
.leftRectangle {
  position        : absolute;
  background      : #EBEEF5;
  width           : 47px;
  height          : 94px;
  transform-origin: right;
}
//右邊遮住圓環(huán)顏色的長方形
.rightRectangle {
  position        : absolute;
  background      : #EBEEF5;
  transform-origin: left;
  left            : 47px;
  width           : 47px;
  height          : 94px;
  transform       : rotate(0deg);
}
//彌補(bǔ)hidde在移動(dòng)端失效的圓環(huán)
.repairAnnulus{
  position     : absolute;
  width        : 94px;
  height       : 94px;
  z-index      : 20;
  border-radius: 50%;
  box-sizing   : content-box;
//改外邊框的時(shí)候，位置也要改下
  border       : 20px solid #ffffff;
  top          : -20px;
  left         : -20px;
}

稍微提一下，我上面的代碼是基于為box-sizing默為 border-box 的情況下，所以直接復(fù)制的時(shí)候要注意下。

• 記錄的第一個(gè)點(diǎn)：
  為什么寫一個(gè).annulusOuter作為圓環(huán)的邊框顏色，而不是直接在.annulusBasics寫一個(gè)background作為圓環(huán)的背景色。是因?yàn)橛帽尘吧珪?huì)造成像光暈一樣的效果：

  
  
  我把.annulusBasics的background設(shè)置為黑色可以看得明顯一點(diǎn)。

• 記錄的第二個(gè)點(diǎn)：
  在pc端上不會(huì)出現(xiàn)這個(gè)問題，但是在移動(dòng)端的時(shí)候，會(huì)出現(xiàn)overflow: hidden失效的情況，所以加了一個(gè).repairAnnulus

  
  
  移動(dòng)端上失效的效果

下面是react中的JSX，根據(jù)classWrongScore不同的值呈現(xiàn)不同的效果

  <div className={style.annulusBasics}>
           <div className={style.centerCircle}>{(Math.floor(classWrongScore * 1000) / 10).toFixed()}%</div>
                <div className={style.annulusOuter}></div>
               {classWrongScore > 0.5 ?
                <div className={style.leftRectangle} style={{ transform: `rotate(${180 * classWrongScore}deg)` }}></div> :
                <div className={style.leftRectangle} ></div>}
                {classWrongScore < 0.5 ?
                <div className={style.rightRectangle} style={{ transform: `rotate(${360 * classWrongScore}deg)` }}></div>
              : <div className={style.rightRectangle} style={{ background: '#FF7F69' }}></div>}
               {/*加下面一個(gè)div是因?yàn)閔idde在移動(dòng)端失效導(dǎo)致樣式不對(duì)*/}
                <div className={style.repairAnnulus}></div>
 </div>

下面是html，超過50%的時(shí)候，修改.leftRectangle的角度，小于50%的時(shí)候，修改.rightRectangle的角度。

<div class="annulusBasics">
        <div class="centerCircle">40%</div>
        <div class="annulusOuter"></div>
        <div class="leftRectangle" style="transform:rotate(144deg)"></div> 
        <div class="rightRectangle"></div>
        {/*加下面一個(gè)div是因?yàn)閔idde在移動(dòng)端失效導(dǎo)致樣式不對(duì)*/}
        <div className={style.repairAnnulus}></div>
   </div>