<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>

<div class="glitch">ERROR</div> 
body{
  background:#fff;
  font-family: 'Varela', sans-serif;
  transform-style:preserve-3d;
  perspective:600px;
}
.glitch{
  color:#000;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
  transform:rotateY(-50deg);
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:"ERROR";
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:#000;
  background:#fff;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:"\00a0\00a0\00a0 404 \00a0\00a0\00a0";
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:#fff;
  background:#000;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
  transform:rotateY(50deg);
}

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