Question

在https://jsfiddle.net/uk9gvsao/7/中，我希望它需要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>

CSS：

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

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

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

Answer 1

您需要在最后一个关键帧处调整stroke-dashoffset的值

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

从视觉上看，0和176之间没有任何区别，但在第一种情况下，动画仍在运行，超出了所需的值。

为了更好地理解，您可以尝试将值设置为175，并查看动画的工作原理。

Jsfiddle fork

Answer 2

您可以调整stroke-dasharray以保留动画的0。您还可以考虑使用一个小的radial-gradient来创建底圈：

.a1 {
  background-color: black;
  width: 40px;
  height: 40px;
}

svg{
  transform: rotate(-90deg);
  stroke-dasharray: 76;
  /* 12 x 3.14(PI) x 2*/
  stroke-dashoffset: 76;
  animation: offsettozero 10s linear forwards;
  
  /*bottom circle*/
  background:radial-gradient(circle at 20px 20px,
    transparent 9px,red 10px,red 14px,transparent 15px);
  /*we canget rid of [circle at 20px 20px] since it's the center by default*/
}

@keyframes offsettozero {
  to {
    stroke-dashoffset: 0;
  }
}

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

Answer 3

因此，正如@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>

...和CSS ...

.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;
    }
}

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

3 个答案: