SOURCE

<svg class="welcome" viewBox="0 0 200 30" preserveAspectRatio="xMidYMid meet">
<!--   <symbol id="s-welcome-text">
    <text text-anchor="middle" x="50%" y="50%">
    欢迎参加百度前端技术学院
    </text>
  </symbol> -->
  <!-- 不适用linearGradient,因为右边不是光滑过渡，暂时不知道什么原因   -->
<!--   <linearGradient id="lg-welcome" x1="0" y1="0" x2="100%" y2="10%">
    <stop stop-color="rgba(255, 255, 255, .2)" offset="30%"></stop>
    <stop stop-color="rgba(0, 200, 0, .7)" offset="60%"></stop>
    <stop stop-color="rgba(255, 255, 255, .2)" offset="30%"></stop>
  </linearGradient> -->
  
  <radialGradient id="rg-welcome">
    <stop offset="0" stop-color="rgba(0, 200, 0, .7)"/>
    <stop offset="50%" stop-color="rgba(200, 0, 0, .9)"/>
  </radialGradient>
  
  <clippath id="cp-welcome-text">
    <text text-anchor="middle" x="50%" y="50%" dy="0.3em" class="text-welcome">
      欢迎参加百度前端技术学院
    </text>
  </clippath>
  
  <g clip-path="url(#cp-welcome-text)">
    <rect class="main--bg" x="0" y="0" width="100%" height="100%"></rect>
    <circle class="streamer--bg" cx="50%" cy="50%" r="100%" fill="url(#rg-welcome)"></circle>
  </g>
</svg>

.welcome {
  border: 1px solid red;
}

.main--bg {
  fill: rgba(200, 0, 0, .9);
}

.streamer--bg {
  transform: translateX(-50%);
  animation: streamer 4s cubic-bezier(.05,.36,.94,.33) infinite;
}

@keyframes streamer {
  100% {
    transform: translateX(100%);
  }
}