SCSS
body {
background-color: #000;
color: #fff;
}
.glitch {
font-size: 130px;
line-height: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
&:before,
&:after{
display: block;
content: 'CODEPAD';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: .8;
}
&:after {
color: #f0f;
z-index: -2;
animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite
}
&:before {
color: #0ff;
z-index: -1;
animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
}
}
@keyframes glitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px)
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px)
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px)
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}
