-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathglitch.css
87 lines (78 loc) · 2.43 KB
/
glitch.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
.glitch {
font-size: inherit;
font-weight: inherit;
text-transform: uppercase;
position: relative;
text-shadow: 0.05em 0 0 rgba(233, 211, 199, 0.75),
-0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
animation: glitch 500ms infinite;
}
.glitch span {
position: absolute;
top: 0;
left: 0;
}
.glitch span:first-child {
animation: glitch 650ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
transform: translate(-0.025em, -0.0125em);
/* color: green; */
opacity: 0.8;
}
.glitch span:last-child {
animation: glitch 375ms infinite;
clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
transform: translate(0.0125em, 0.025em);
/* color: red; */
opacity: 0.8;
}
/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 rgba(233, 211, 199, 0.75),
-0.05em -0.025em 0 rgba(173,202,184, 0.75),
-0.025em 0.05em 0 rgba(185, 211, 220, 0.75);
}
14% {
text-shadow: 0.05em 0 0 rgba(233, 211, 199, 0.75),
-0.05em -0.025em 0 rgba(173,202,184, 0.75),
-0.025em 0.05em 0 rgba(185, 211, 220, 0.75);
}
15% {
text-shadow: -0.05em -0.025em 0 rgba(233, 211, 199, 0.75),
0.025em 0.025em 0 rgba(173,202,184, 0.75),
-0.05em -0.05em 0 rgba(185, 211, 220, 0.75);
}
49% {
text-shadow: -0.05em -0.025em 0 rgba(233, 211, 199, 0.75),
0.025em 0.025em 0 rgba(173,202,184, 0.75),
-0.05em -0.05em 0 rgba(185, 211, 220, 0.75);
}
50% {
text-shadow: 0.025em 0.05em 0 rgba(233, 211, 199, 0.75),
0.05em 0 0 rgba(173,202,184, 0.75), 0 -0.05em 0 rgba(185, 211, 220, 0.75);
}
99% {
text-shadow: 0.025em 0.05em 0 rgba(233, 211, 199, 0.75),
0.05em 0 0 rgba(173,202,184, 0.75), 0 -0.05em 0 rgba(185, 211, 220, 0.75);
}
100% {
text-shadow: -0.025em 0 0 rgba(233, 211, 199, 0.75),
-0.025em -0.025em 0 rgba(173,202,184, 0.75),
-0.025em -0.05em 0 rgba(185, 211, 220, 0.75);
}
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}