33 lines
676 B
CSS
33 lines
676 B
CSS
|
/* GLITCH TITLE */
|
||
|
|
.glitch-wrapper {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch {
|
||
|
|
position: relative;
|
||
|
|
color: var(--color-void-950);
|
||
|
|
mix-blend-mode: lighten;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch::before,
|
||
|
|
.glitch::after {
|
||
|
|
content: attr(data-text);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
background: var(--color-void-0);
|
||
|
|
clip: rect(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch::before {
|
||
|
|
left: -2px;
|
||
|
|
text-shadow: 2px 0 var(--color-magenta-500);
|
||
|
|
animation: glitch-anim-1 2s infinite linear alternate-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch::after {
|
||
|
|
left: 2px;
|
||
|
|
text-shadow: -2px 0 var(--color-cyan-500);
|
||
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
||
|
|
}
|