Create beautiful text animation glitch effects with HTML by just writing CSS code. Here is the source code of the complete code. And if you want, you can create this glitter effect by watching just 5 minutes of video. Text is placed inside an h1 tag within the body of the HTML code. And h1 tag has a class taken to call the style sheet. And the whole style is created by CSS code. For text animation
HTML Source codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Text Glitch Effect - Doolot Tech </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="textglitch"> HelloGlitch </h1>
</body>
</html>Style.css
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: fit-content;
margin: 0 auto;
color: green;
background: #d4ebf5;
}
.textglitch{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size:100px ;
}
.textglitch::before, .textglitch::after{
content: 'HelloGlitch';
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.textglitch:hover::before{
animation: glitch 0.3s linear 6;
color: blue;
z-index: -2;
}
.textglitch:hover::after{
animation: glitch 0.3s linear 6;
color: red;
z-index: -1;
}
@keyframes glitch{
0%{
top: 0px;
left: 0px;
}
20%{
top: -5px;
left: -5px;
}
40%{
top: 5px;
left: 5px;
}
60%{
top: -5px;
left: -5px;
}
80%{
top: 5px;
left: -5px;
}
100%{
top: 0px;
left: 0px;
}
}
