background-clip: text example

background-clip-text-example.markdown

background-clip: text example

index.html

<h1>It's FRIDAY!</h1>

style.scss

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  font-family: 'Luckiest Guy', cursive;
}

@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }
  100% {
    background-position: 100% 50%;
  }
}

h1 {
  font-size: 15vw;
  background-image: url(https://i.ibb.co/89Cf3dm/text-bg.png);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
   animation: moveBg 90s linear infinite;
  -webkit-animation: moveBg 90s linear infinite;
}