如何在 CSS 中为圆弧的填充设置动画？ [关闭]

Question

有没有办法我们可以像进度条一样以逆时针方向递增的方式填充css半圆的颜色。

这是半圆代码。 https://jsfiddle.net/sonymax46/wqfovdjh/7/。

        .cc{
    background-color: transparent;
    overflow: hidden;
    width: 80px;
}
.curve {
    height: 60px;
    width: 100%;
    background-color: none;
    border-radius: 50%;
    border: 2px solid blue;
    transform: translateX(50%);
}

我希望在活动中用绿色填充现有的蓝色。如何使用 css O SVG 实现这一目标

提前致谢

Answer 1

选项 A 是使用一个容器来切断圆形元素和一个伪类作为圆形顶部的“掩码”。然后当元素旋转时渐变背景显示另一种颜色。

这样做的主要缺点是你必须有一个纯色背景，叠加层可以在视觉上匹配。

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  /* just to show the box could be transparent */
  background-color: lightgray;
  cursor: pointer;
}

.arc {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* Use relative on parent so mask aligns */
  left: 50%;
  /* Move the circle 'outside' the wrapper */
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.arc:after {
  /* this creates the 'mask' */
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: white;
  border-radius: 50%;
}

.wrapper:hover .arc {
  /* rotate the full element because we can't transition backgrounds */
  transform: rotate(-180deg);
}

.gradientExample {
  /* just to show the gradient */
  height: 20px;
  width: 200px;
  margin: 0 20px;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the arc</p>
<div class="wrapper">
  <div class="arc"></div>
</div>
<div class="gradientExample"></div>

选项 B - 使用 clip-path 而不是重叠元素。这要好得多，但您需要创建一个 SVG 对象以用于弧线，从尺寸调整的角度来看，这很麻烦。

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: lightgray;
  cursor: pointer;
}

.svgArc {
  width: 100%;
  height: 100%;
  position: relative;
  clip-path: url(#svgPath);
}

.svgArc:after {
  /* have to use a pseudo element because we can't rotate the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.v2:hover .svgArc:after {
  transform: rotate(180deg);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the gray square</p>

<div class="wrapper v2">
  <div class="svgArc">

  </div>
</div>

<svg width="0" height="0" viewBox="0 0 200 200">
    <defs>
        <clipPath id="svgPath">
					<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
        </clipPath>
    </defs>
</svg>

选项 C - 创建一个 SVG 圆圈并为 offset-path 设置动画。在此处查看我的答案和示例：How to make linear css transition to SVG path?

Answer 2

也许有 css 自定义变量？

const Root   = document.documentElement
  ,  btColor = document.getElementById('bt-color')
  ;
btColor.onclick=_=>
  {
  Root.style.setProperty('--bColor', 'green')
  }

:root {
  --bColor  : blue;
  }
.cc{
  background-color: transparent;
  overflow: hidden;
  width: 80px;
  }
.curve {
  height: 60px;
  width: 100%;
  background-color: none;
  border-radius: 50%;
  border: 2px solid var(--bColor);
  transform: translateX(50%);
  }

<div class="cc">
  <div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>