svg 闪光灯特效

svg

by Robbie Yang

HTML

<svg width="100%" height="100">
        <defs>
          <pattern id="pattern" width="100%" height="100%"  patternContentUnits="objectBoundingBox">
            <!-- <image width="1" height="1" xlink:href="https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/78695f52044547.590248c075eec.jpg"/> -->
          </pattern>
        </defs>
        <g>
          <text text-anchor="middle" x="50%" y="50%" class="text text__effect1">
              yangoogle.com
              <!-- <animate attributeName="x" from="50%" to="60" begin="0s" dur="3s" repeatCount="indefinite" /> -->
          </text>
          <text text-anchor="middle" x="50%" y="50%" class="text text__effect2">
              yangoogle.com
              <!-- <animate attributeName="x" from="50%" to="60" begin="0s" dur="3s" repeatCount="indefinite" /> -->
          </text>
        </g>
    </svg>

SCSS

.text {
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    stroke-width: 2px;
    stroke-dasharray: 100 40;
    fill: none;
    animation: stroke 3s infinite linear;
    &__effect1 {
      stroke: #e6dee9;
      text-shadow: 0 0 5px #ace0f9;
      animation-delay: -1.5s;
    }
    &__effect2 {
      stroke: #cce798;
      text-shadow: 0 0 5px #94f1be ;
      animation-delay: -3s;
    }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}