<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,500,900,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet" type="text/css">
<h1 class="background-clip">Clip Text</h1>
@import "compass/css3";

html, body {
  background: #f1503f;
  height: 100%;
}
h1 {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.background-clip {
  background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1504/clouds.jpg);
  background-repeat: repeat-x;
  background-position: 0 0;
  font-size: 100px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Luckiest Guy';
  color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  -webkit-animation: BackgroundAnimated 15s linear infinite;
  -moz-animation: BackgroundAnimated 15s linear infinite;
  -ms-animation: BackgroundAnimated 15s linear infinite;
  -o-animation: BackgroundAnimated 15s linear infinite;
  animation: BackgroundAnimated 15s linear infinite;
}

@keyframes BackgroundAnimated {
from {
    background-position:0 0
}

to {
    background-position:100% 0
}
}

@-webkit-keyframes BackgroundAnimated {
from {
    background-position:0 0
}

to {
    background-position:100% 0
}
}

@-ms-keyframes BackgroundAnimated {
from {
    background-position:0 0
}

to {
    background-position:100% 0
}
}

@-moz-keyframes BackgroundAnimated {
from {
    background-position:0 0
}

to {
    background-position:100% 0
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js