使用CSS实现 SVG动态LOGO

图标部分

.viu-logo-icon path{
        stroke: #1fbc45;
        stroke: var(--s-dc);
        fill-opacity: 0;
        stroke-width: 1px;
        stroke-dasharray: var(--s-dd);
        stroke-dashoffset: var(--s-dd);
        animation: logo-animation 1.3s ease-in-out forwards;
        animation-delay: var(--a-d);
        --s-dd: 1150;
        --s-ddo: -1150;
      }

      .viu-logo-1 {
        fill: #00a603;
        --s-dc: #00a603;
      }

      .viu-logo-2 {
        fill: #ffd741;
        --s-dc: #ffd741;
      }

      .viu-logo-3 {
        fill: #fa0000;
        --s-dc: #fa0000;
      }

      .viu-logo-4 {
        fill: #0ac9ff;
        --s-dc: #0ac9ff;
      }

      @keyframes logo-animation {
        60% {
          fill-opacity: 0;
          stroke-dashoffset: 0;
        }

        to {
          fill-opacity: 1;
          stroke-dashoffset: 0;
        }
      }

代码中（–s-dc）是动态为logo的个体图案设置描边颜色（fill）是图案的填充颜色，其他的照搬就行

文字（标题部分）

.viu-logo-stroke {
        fill: none;
        stroke: #0ac9ff;
        stroke-width: 2;
        stroke-dasharray: none;
        stroke-opacity: 1;
      }

      .viu-logo-stroke path {
        stroke-dasharray: var(--s-dd);
        stroke-dashoffset: var(--s-dd);
        fill: #0ac9ff;
        fill-opacity: 0;
        animation: stroke-animation 2s ease-in-out forwards;
        animation-delay: var(--a-d);
      }

      .viu-logo-y-1 {
        --s-dd: 280;
        animation-duration: 1s !important;
      }

      .viu-logo-x {
        --s-dd: 420;
        --a-d: .4s;
        animation-duration: .6s !important;
      }

      .viu-logo-z {
        --s-dd: 238;
        --a-d: .45s;
        animation-duration: .9s !important;
      }

      .viu-logo-y-2 {
        --s-dd: 510;
        --a-d: 1s;
        animation-duration: .8s !important;
      }

      .viu-logo-w {
        --s-dd: 687;
        animation-duration: .5s !important;
        --a-d: 1.45s;
      }

      @keyframes stroke-animation {
        100% {
          fill-opacity: 0;
        }

        to {
          fill-opacity: 1;
          stroke-width: 0;
          stroke-dashoffset: 0;
          --s-dd: 0;
        }
      }

代码中（stroke-width: 2;）设置描边时的线条宽度。（–s-dd）数值。下

文字（副标题）

.viu-logo-zm {
        fill: #fc4064;
        opacity: 0;
        animation: url-animation .5s ease-in-out forwards;
        animation-delay: 1.6s;
        fill-opacity: .8;
      }

      @keyframes url-animation {
        to {
          opacity: .8;
        }
      }