C# CSS循环进度，线性秒不准确？

从，我希望它需要20秒才能完成。虽然我有40多岁，但似乎只需要12秒左右。我可以增加40，但我想知道为什么不准确

另外，我希望立即创建一个银戒指，然后白戒指逐渐覆盖它，以便用户看到白戒指的预期路径。有人能告诉我怎么做吗？蒂亚

<div class='a1'>
    <svg height="40" width="40">
        <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="black" />
    </svg>
</div>

---

您需要在最后一个关键帧调整

笔划dashoffset

的值

@keyframes offsettozero {
   to {
      stroke-dashoffset: 176;
   }
}

从视觉上看，您看不到

0

和

176

之间的任何差异，但在第一种情况下，动画仍在运行，超出了所需的值

为了更好地理解，您可以尝试将该值设置为

175

，并查看动画的工作方式

---

您可以调整

stroke dasharray

以保持动画的

0

。你也可以考虑一个小的<代码>径向渐变来创建底部圆：

.a1{
背景色：黑色；
宽度：40px；
高度：40px；
}
svg{
变换：旋转（-90度）；
行程：76；
/*12 x 3.14（圆周率）x 2*/
行程偏移：76；
动画：offsettozero 10秒直线前锋；
/*底圈*/
背景：径向梯度（20px 20px处的圆圈，
透明9px，红色10px，红色14px，透明15px）；
/*我们可以去掉[20px 20px处的圆]，因为默认情况下它是中心*/
}
@关键帧偏移{
到{
笔划偏移：0；
}
}

---

因此，正如@fcalderan所指出的，时间间隔需要为176，我们还复制了svg，并将它们一个放在另一个上面。背景是向导，顶部是动画

因此，您的代码将更改为：

<div class='a1'>
<svg height="40" width="40" class="bg">
    <circle cx="20" cy="20" r="12" stroke="rgba(99, 99, 99, 0.5)" stroke-width="5" fill="black" />
</svg>  
<svg height="40" width="40" class="first">
    <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="black" />
</svg>

---

圆的半径实际上是12-5（笔划宽度），而不是40。圆的半径是2PI*半径。在你的例子中，2*Math.PI*12=74谢谢。我正在试图弄清楚如何使红色笔划宽度与白色笔划宽度相同。@user1946932检查更新，您需要对圆进行Transpare填充

<div class='a1'>
<svg height="40" width="40" class="bg">
    <circle cx="20" cy="20" r="12" stroke="rgba(99, 99, 99, 0.5)" stroke-width="5" fill="black" />
</svg>  
<svg height="40" width="40" class="first">
    <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="black" />
</svg>

.a1 {
    background-color: black;
    width: 40px;
    height: 40px;
}

.a1 svg {
    position: absolute;
}

.first {
    transform: rotate(-90deg);
    stroke-dasharray: 251;
    /* (2PI * 40px) */
    stroke-dashoffset: 251;
    animation: offsettozero 176s linear forwards;
}

@keyframes offsettozero {
    to {
        stroke-dashoffset: 0;
    }
}