javascript - 半圆渐变js

Question

圆内的渐变效果怎么弄？我有这样一个 initial code :

HTML:

 <div class="progresss">
   <div class="barOverflow">
     <div class="bar"></div>
   </div>
   <span>10</span>%
 </div>

 <div class="progresss">
   <div class="barOverflow">
     <div class="bar"></div>
   </div>
   <span>75</span>%
</div>

SCSS:

.progresss{
    position: relative;
    margin: 4px;
    float:left;
    text-align: center;
}
.barOverflow{ /* Wraps the rotating .bar */
    position: relative;
    //overflow: hidden; /* Comment this line to understand the trick */
    width: 145px; height: 45px; /* Half circle (overflow) */
    margin-bottom: -14px; /* bring the numbers up */

    &:after {
        content: '';
        position: relative;
        display: block;
        top: -75px;
        width: 145px;
        height: 90px;
        background-color: #f3f5f6;
    }
}
    .bar{
    position: relative;
    top: 0; left: 0;
    width: 145px; height: 145px; /* full circle! */
    border-radius: 50%;
    box-sizing: border-box;
    border: 27px solid red;       /* half red, */
    border-bottom-color: green;  /* half green */
    border-right-color: green;

}

JS:

$(".progresss").each(function(){

  var $bar = $(this).find(".bar");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);

  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)", // 100%=180° so: ° = % * 1.8
        // 45 is to add the needed rotation to have the green borders at the     bottom
      });
      $val.text(p|0);
    }
  });
});

我想要的是:

Answer 1

那天我做了类似的事情，因为我发现实现渐变边框的唯一方法是(我想现在仍然是)使用 CSS border-image property ，我想出了完全不同的方法:

1. 创建 3 个嵌套的 div 元素:

   • wrapper，我们需要 overflow hidden ，
   • out，这是具有渐变背景颜色的那个 - 这就是我们要旋转的那个，
   • in，这是显示增长百分比数字的内圈，

2. 在第一个 wrapper 中添加一些元素来保存百分比数字并使用 position: absolute，将它放在父元素的中间:我们不显示in 元素中的百分比，因为它与 out 元素一起旋转，创建另一个元素比同步旋转两个圆更容易。

3. 使 wrapper 成为一个圆圈并隐藏它的溢出 - 它有助于 4.:

4. 给出 out 元素渐变背景，下半部分为绿色，上半部分透明 - 由于父级溢出，它的形状为圆形。

5. 剩下的只是数学:您可以在 my fiddle 中查看.

这不是完美的解决方案，如果您使用百分比 width 和 height，我不介意发布它。但是，当我看到固定的 (px) 尺寸时，我认为您也可以使用我的方法。

根据您的需要调整它的所有问题 - 梯度和尺寸，如果您无法定位整个东西，只需使用 wrapper 元素即可， children 将“跟随” .