Skip to content

Commit 6c5ec18

Browse files
HuXn-WebDevHuXn-WebDev
committed
CSS GLITCH Effect
1 parent f9858d7 commit 6c5ec18

2 files changed

Lines changed: 92 additions & 0 deletions

File tree

‎13. CSS GLITCH Effect/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS GLITCH</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="glitch">HuXn</div>
11+
</body>
12+
</html>

‎13. CSS GLITCH Effect/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap");
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
background: #111;
15+
font-family: "Playfair Display", serif;
16+
}
17+
18+
.glitch {
19+
position: absolute;
20+
font-size: 100px;
21+
text-transform: uppercase;
22+
color: #fff;
23+
letter-spacing: 8px;
24+
cursor: pointer;
25+
}
26+
27+
.glitch::before {
28+
content: "HuXn";
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
display: block;
33+
}
34+
35+
.glitch:hover::before {
36+
color: red;
37+
z-index: -2;
38+
animation: glitch 0.3s linear 6;
39+
}
40+
41+
.glitch::after {
42+
content: "HuXn";
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
display: block;
47+
}
48+
49+
.glitch:hover::before {
50+
color: red;
51+
z-index: -1;
52+
animation: glitch 0.3s linear 6 reverse;
53+
}
54+
55+
@keyframes glitch {
56+
0% {
57+
top: 0;
58+
left: 0;
59+
}
60+
20% {
61+
top: -5px;
62+
left: -5px;
63+
}
64+
40% {
65+
top: 5px;
66+
left: 5px;
67+
}
68+
60% {
69+
top: -5px;
70+
left: 5px;
71+
}
72+
80% {
73+
top: 5px;
74+
left: -5px;
75+
}
76+
100% {
77+
top: 0;
78+
left: 0;
79+
}
80+
}

0 commit comments

Comments
 (0)