SCSS
$duration : 100ms;
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #222;
overflow: hidden;
}
.wrapper {
position: relative;
width: 100%;
height: 550px;
}
h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'Inconsolata', monospace;
font-size: 15vw;
text-align: center;
animation: glitch $duration infinite;
}
.a {
color: #f35e5c;
}
.b {
color: #fff;
animation-delay: -$duration*.25;
}
.c {
color: #3498db;
animation-delay: -$duration*.5;
}
@keyframes glitch {
50% {
transform: scale3d(0,5,1);
opacity: 0;
}
}
