Question

我正在尝试使用仅限html和＆amp ;;创建加载动画看起来像ekg读数的css。我有它的工作，但我希望它能尽快开始重绘（现在它完全消失了，我希望它在它完成之前开始绘制“未绘制”

<head>

    <style>
    body {
  background-color: #fff;
}



.path {
  animation: draw 2.2s infinite ease-in-out;
   -webkit-animation: draw 2.2s infinite ease-in-out;
}


 @keyframes draw {
   from {
    stroke-dashoffset: 1100;
 }
     to { stroke-dashoffset: 50}
}

        @-webkit-keyframes draw {
   from {
    stroke-dashoffset: 1100;
 }
     to { stroke-dashoffset: 50}
}

    </style>
    </head>
<div class="bg">  
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">

  <path class="path" stroke="#ca6728" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="610" fill="none" d="M0,80.9h20.6c0.5,0,1.4-0.2,1.8-0.5L38,70.1
        c0.5-0.3,1.2-0.3,1.6,0l12.7,9.4c0.4,0.3,1.3,0.6,1.8,0.6l13.3,0c0.6,0,1.2,0.4,1.5,0.9l6.2,11.3c0.3,0.5,0.5,0.4,0.5-0.1l4.4-90.8
        c0-0.5,0.1-0.5,0.1,0l6.9,102.1c0,0.5,0.2,0.6,0.4,0l7-22.4c0.2-0.5,0.7-1,1.3-1l16.1,0c0.5,0,1.3-0.3,1.8-0.7L129,66.4
        c0.4-0.4,1.1-0.3,1.5,0l13.3,13.1c0.4,0.4,1.2,0.7,1.7,0.7l20.1,0,"/>



  </svg>
</div>

    </html>

JS小提琴：https://jsfiddle.net/jzvenice/4sLw9ag9/

Answer 1

我认为通过使用stroke-dasharray值可以实现类似的效果：

https://jsfiddle.net/4sLw9ag9/2/

...

stroke-dasharray="391 300" stroke-dashoffset="0"

....

@keyframes draw {
from {
stroke-dashoffset: 691;
}
to {
stroke-dashoffset: 0}
}

...

只有第一个值是精确的（路径的长度是391像素），它是通过注释掉的JavaScript行检测到的，并且不需要进一步的功能。另一个值可以针对最佳视觉效果进行调整。

编辑 - 以前删除了答案，但似乎比评论更有意义。因此，不要因为稍微更新而取消删除。

如何让动画SVG更快地开始“自我绘制”？

1 个答案: