svg+描边动画实现霓虹灯特效

参考博客：https://juejin.cn/post/6844903815708164110

效果图：

代码实现

html：

		 <svg width="1600px" height="100%" xmlns="http://www.w3.org/2000/svg"><!--xmlns命名空间,和html分离-->
            <symbol id="text">
              <text x="0" y="35%" class="text">youyunxia是最棒的~~</text>
            </symbol>
            <g>
              <use xlink:href="#text" class="use-text"></use>
              <use xlink:href="#text" class="use-text"></use>
              <use xlink:href="#text" class="use-text"></use>
              <use xlink:href="#text" class="use-text"></use>
              <use xlink:href="#text" class="use-text"></use>
            </g>
          </svg>

css:

	svg{
      position: absolute;
      background-color: #000;
    }
    .use-text{
      fill: none;
      stroke: white;
      stroke-dashoffset: 35%;
      stroke-dasharray: 0 87.5%;
      stroke-width: 2px;
    }
    .use-text:nth-child(1) {
      stroke: #360745;
      animation: animation1 8s infinite ease-in-out forwards;

    }

    .use-text:nth-child(2) {
      stroke: #D61C59;
      animation: animation2 8s infinite ease-in-out forwards;

    }

    .use-text:nth-child(3) {
      stroke: #E7D84B;
      animation: animation3 8s infinite ease-in-out forwards;

    }

    .use-text:nth-child(4) {
      stroke: #EFEAC5;
      animation: animation4 8s infinite ease-in-out forwards;

    }

    .use-text:nth-child(5) {
      stroke: #1B8798;
      animation: animation5 8s infinite ease-in-out forwards;
    }

    @keyframes animation1 {
      50%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 7%;
      }
      70%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 7%;
      }
    }
    @keyframes animation2 {
      50%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 14%;
      }
      70%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 14%;
      }
    }
    @keyframes animation3 {
      50%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 21%;
      }
      70%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 21%;
      }
    }
    @keyframes animation4 {
      50%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 28%;
      }
      70%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 28%;
      }
    }
    @keyframes animation5 {
      50%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 35%;
      }
      70%{
        stroke-dasharray: 7% 28%;
        stroke-dashoffset: 35%;
      }
    }