Skip to content

Commit ff13fe9

Browse files
indrarahulindrarahul
authored
Add files via upload
1 parent 59a85c1 commit ff13fe9

File tree

1 file changed

+213
-0
lines changed

1 file changed

+213
-0
lines changed

‎assets/css/core/glitch.css‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
@font-face {
2+
font-family: hackfont;
3+
src: url('../../fonts/hacked/HACKED.ttf');
4+
}
5+
.glitch h1 {
6+
7+
margin-left: 0px;
8+
font-family: hackfont;
9+
font-size: 70px;
10+
margin-bottom: 0px;
11+
padding-bottom: 0px;
12+
}
13+
14+
.glitch {
15+
color: white;
16+
white-space: nowrap;
17+
height: 60px;
18+
}
19+
20+
.glitch h1 {
21+
position: absolute
22+
}
23+
24+
.glitch h1:nth-child(1) {
25+
color: white
26+
}
27+
28+
.glitch h1:nth-child(2) {
29+
color: #67f3da;
30+
opacity: .25
31+
}
32+
33+
.glitch h1:nth-child(3) {
34+
color: #f16f6f;
35+
opacity: .25
36+
}
37+
38+
.glitchit h1:nth-child(1) {
39+
animation: glitch1 3s 1
40+
}
41+
42+
.glitchit h1:nth-child(2) {
43+
animation: glitch2 3s 1
44+
}
45+
46+
.glitchit h1:nth-child(3) {
47+
animation: glitch3 3s 1
48+
}
49+
50+
@keyframes glitch1 {
51+
0% {
52+
transform: none;
53+
opacity: 1
54+
}
55+
7% {
56+
transform: skew(-0.5deg, -0.9deg);
57+
opacity: .75
58+
}
59+
10% {
60+
transform: none;
61+
opacity: 1
62+
}
63+
27% {
64+
transform: none;
65+
opacity: 1
66+
}
67+
30% {
68+
transform: skew(.8deg, -0.1deg);
69+
opacity: .75
70+
}
71+
35% {
72+
transform: none;
73+
opacity: 1
74+
}
75+
52% {
76+
transform: none;
77+
opacity: 1
78+
}
79+
55% {
80+
transform: skew(-1deg, .2deg);
81+
opacity: .75
82+
}
83+
50% {
84+
transform: none;
85+
opacity: 1
86+
}
87+
72% {
88+
transform: none;
89+
opacity: 1
90+
}
91+
75% {
92+
transform: skew(.4deg, 1deg);
93+
opacity: .75
94+
}
95+
80% {
96+
transform: none;
97+
opacity: 1
98+
}
99+
100% {
100+
transform: none;
101+
opacity: 1
102+
}
103+
}
104+
105+
@keyframes glitch2 {
106+
0% {
107+
transform: none;
108+
opacity: .25
109+
}
110+
7% {
111+
transform: translate(-2px, -3px);
112+
opacity: .5
113+
}
114+
10% {
115+
transform: none;
116+
opacity: .25
117+
}
118+
27% {
119+
transform: none;
120+
opacity: .25
121+
}
122+
30% {
123+
transform: translate(-5px, -2px);
124+
opacity: .5
125+
}
126+
35% {
127+
transform: none;
128+
opacity: .25
129+
}
130+
52% {
131+
transform: none;
132+
opacity: .25
133+
}
134+
55% {
135+
transform: translate(-5px, -1px);
136+
opacity: .5
137+
}
138+
50% {
139+
transform: none;
140+
opacity: .25
141+
}
142+
72% {
143+
transform: none;
144+
opacity: .25
145+
}
146+
75% {
147+
transform: translate(-2px, -6px);
148+
opacity: .5
149+
}
150+
80% {
151+
transform: none;
152+
opacity: .25
153+
}
154+
100% {
155+
transform: none;
156+
opacity: .25
157+
}
158+
}
159+
160+
@keyframes glitch3 {
161+
0% {
162+
transform: none;
163+
opacity: .25
164+
}
165+
7% {
166+
transform: translate(2px, 3px);
167+
opacity: .5
168+
}
169+
10% {
170+
transform: none;
171+
opacity: .25
172+
}
173+
27% {
174+
transform: none;
175+
opacity: .25
176+
}
177+
30% {
178+
transform: translate(5px, 2px);
179+
opacity: .5
180+
}
181+
35% {
182+
transform: none;
183+
opacity: .25
184+
}
185+
52% {
186+
transform: none;
187+
opacity: .25
188+
}
189+
55% {
190+
transform: translate(5px, 1px);
191+
opacity: .5
192+
}
193+
50% {
194+
transform: none;
195+
opacity: .25
196+
}
197+
72% {
198+
transform: none;
199+
opacity: .25
200+
}
201+
75% {
202+
transform: translate(2px, 6px);
203+
opacity: .5
204+
}
205+
80% {
206+
transform: none;
207+
opacity: .25
208+
}
209+
100% {
210+
transform: none;
211+
opacity: .25
212+
}
213+
}

0 commit comments

Comments
 (0)