Text Glitch Effect
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glitch by Growcode</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div title="404">404</div>
</body>
</html>
CSS :
body{
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: 'Fira Mono', monospace;
letter-spacing: -7px;
}
div{
animation: glitch 1s linear infinite;
}
@keyframes glitch{
4%,60%{
transform: translate(-2px,0) skew(0deg);
}
2%,64%{
transform: translate(2px,0) skew(0deg);
}
62%{
transform: translate(0,0) skew(5deg);
}
}
div:before,
div:after{
content: attr(title);
position: absolute;
left: 0;
}
div:before{
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitchTop{
2%,64%{
transform: translate(2px,-2px);
}
4%,60%{
transform: translate(-2px,2px);
}
62%{
transform: translate(13px,-1px) skew(-13deg);
}
}
div:after{
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitchBotom{
2%,64%{
transform: translate(-2px,0);
}
4%,60%{
transform: translate(-2px,0);
}
62%{
transform: translate(-22px,5px) skew(21deg);
}
}
Comments
Post a Comment