New course! Every coder should learn Generative AI!
Try a free lesson+ 1
HTML--->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1 class="glitch">Glitch effect</h1>
</body>
</html>
CSS--->
body {
background-color: #121b2b;
}
.glitch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
color: #fff;
animation: glitch 0.5s linear infinite;
}
@keyframes glitch {
0%, 100% {
text-shadow: -2.5px -2.5px 0 #6b0b7c,
2.5px 2.5px 0 rgb(0, 255, 255);
}
25% {
text-shadow: 2.5px 2.5px 0 #470970,
-2.5px -2.5px 0 rgb(0, 255, 255);
}
50% {
text-shadow: 2.5px -2.5px 0 #4b0981,
-2.5px 2.5px 0 rgb(0, 255, 255);
}
75% {
text-shadow: 2.5px 2.5px 0 #ffee00,
2.5px -2.5px 0 rgb(0, 255, 255);
}
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Cyber security
1 Votes
Bash
0 Votes
Personal chat
1 Votes
Why exception is not handled
1 Votes
Links of cmy codes
4 Votes
Adding image to html
0 Votes
Link
5 Votes