📝 代码查看
使用runcode.html页面

2
查看次数
2025-10-31
创建时间
2025-10-31
最后更新
<!--背景圆-->
<div class="circle">
  <!--左半边圆-->
  <div class="circle_left">
    <div class="clip_left">

    </div>
  </div>
  <!--右半边圆-->
  <div class="circle_right">
    <div class="clip_right"></div>
  </div>
  <div class="mask">
    <span>10</span>%
  </div>
</div>
<script src="https://static.cdsy.xyz/script/jquery.min.js"></script>
.circle {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  background: red;
}

.clip_left,
.clip_right {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.circle_left,
.circle_right {
  width: 200px;
  height: 200px;
  position: absolute;
  border-radius: 50%;
  top: 0px;
  left: 0px;
  background: green;
}

/*出于展示用的改变背景色*/
/*.circle_left{
                background: green;
            }
            .circle_right{
                background: lightblue;
            }*/
.circle_right,
.clip_right {
  clip: rect(0, auto, auto, 100px);
}

.circle_left,
.clip_left {
  clip: rect(0, 100px, auto, 0);
}

/*
            *当top和left取值为auto时，相当于0
            *当bottom和right取值为auto时，相当于100%
            */
.mask {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  left: 25px;
  top: 25px;
  background: #FFF;
  position: absolute;
  text-align: center;
  line-height: 150px;
  font-size: 16px;
}
$(function() {
  if ($('.mask span').text() <= 50) {
    $('.circle_right').css('transform', 'rotate(' + ($('.mask span').text() * 3.6) + 'deg)');
  } else {
    $('.circle_right').css({
      'transform': 'rotate(0deg)',
      "background": "red"
    });
    $('.circle_left').css('transform', 'rotate(' + (($('.mask span').text() - 50) * 3.6) + 'deg)');
  }
})

👁️ 实时预览