テキストの背景を画像にしてアニメーションさせる

Result

css

h1{/*テキスト装飾*/
  color: #F2F5FE;
  text-align: center;
  font-size: 200px;
  line-height: 1;
  font-family: 'Rajdhani', sans-serif;

  
}
h1 a{/*background-clip:text;で背景範囲をテキストにし、背景を画像に指定*/
  display:block;
    background: -webkit-linear-gradient(transparent, transparent), url(https://picsum.photos/1800/1400?random) repeat;
  background-size: auto 500px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: background 15s infinite linear;
}
@keyframes background {/*背景のポジションをアニメーション遷移*/
  from {
    background-position: 0 0%;
  }
  to {
    background-position: -500px 0px;
  }
}

html

<h1>
<a href="https://picsum.photos/">Lorem<br>Picsum</a>
</h1>

via

Be happy!