CSS stroke-dashoffset与自己的签名动画实例页面

展示

代码

• HTML：

  <svg width="700" height="350" viewBox="0 0 700 350">
      <path d="m106,..." stroke-width="5" stroke="#000000" fill="none"/>
      <path d="m343,..." stroke-width="5" stroke="#000000" fill="none"/>
      <path d="m449,..." stroke-width="5" stroke="#000000" fill="none"/>
  </svg>

• CSS：

  path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear infinite;
  }
  @keyframes dash {
      to {
          stroke-dashoffset: 0;
      }
  }