Qbrqdz

index.html

<div>
  <span>C</span>
  <span>H</span>
  <span>A</span>
  <span>R</span>
  <span>A</span>
  <span>D</span>
  <span>E</span>
</div>

Qbrqdz.markdown

Qbrqdz

A Pen by Alex G on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

$mauve: rgb(102, 35, 69);
$red: rgb(102, 21, 16);
$blue: rgb(39, 110, 151);
$yellow: rgb(175, 133, 45);

body {
  background-color: rgb(0,0,0);
}

div {
  text-align: center;
  margin-top: 10%;
}

span {
  display: inline-block;
  margin-left: -15px;
  font-size: 200px;
  line-height: 200px;
  font-family: "Oswald", sans-serif;
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;  
  animation: slide 2s linear infinite;
  background-size: auto 400px;
  background-position: left 0px; 
  background-image: linear-gradient(to bottom,    
    $mauve 0px, $mauve 100px,
    black 100px,
    $red 102px,$red 130px,   
    black 130px,
    $blue 132px, $blue 180px,
    black 180px,
    $yellow 182px, $yellow 200px,   
    black 200px,
    $mauve 202px, $mauve 240px,   
    black 240px,
    $red 242px, $red 300px,  
    black 300px,
    $blue 302px, $blue 350px,  
    black 350px,
    $yellow 352px, $yellow 398px,
    black 399px, black 400px
  );
   &:nth-child(odd) {
    top: 30px;
    background-image: linear-gradient(to bottom,     $mauve 0px, $mauve 70px,
    black 70px,
    $red 72px,$red 100px,   
    black 100px,
    $blue 102px, $blue 150px,
    black 150px,
    $yellow 152px, $yellow 170px,   
    black 170px,
    $mauve 172px, $mauve 210px,   
    black 210px,
    $red 212px, $red 270px,  
    black 270px,
    $blue 272px, $blue 320px,  
    black 320px,
    $yellow 322px, $yellow 370px
  );
  }
}

@keyframes slide {
  100% {
    background-position: left -400px;    
  }  
}