90 lines
1.4 KiB
CSS
90 lines
1.4 KiB
CSS
.glitch {
|
|
position: relative;
|
|
display: inline-block;
|
|
isolation: isolate;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Duplicated text layers inherit the element's color */
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-glitch);
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Horizontal glitch slices */
|
|
.glitch::before {
|
|
z-index: 1;
|
|
animation: glitch-cyan 1.5s infinite steps(1);
|
|
}
|
|
|
|
.glitch::after {
|
|
z-index: 2;
|
|
animation: glitch-red 1.2s infinite steps(1);
|
|
}
|
|
|
|
/* Horizontal slices move left and right */
|
|
@keyframes glitch-cyan {
|
|
0%,
|
|
100% {
|
|
clip-path: inset(0 0 80% 0);
|
|
transform: translateX(-8px);
|
|
}
|
|
|
|
15% {
|
|
clip-path: inset(20% 0 55% 0);
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
30% {
|
|
clip-path: inset(55% 0 25% 0);
|
|
transform: translateX(-12px);
|
|
}
|
|
|
|
45%,
|
|
70% {
|
|
clip-path: inset(0 0 100% 0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
80% {
|
|
clip-path: inset(35% 0 45% 0);
|
|
transform: translateX(7px);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-red {
|
|
0%,
|
|
100% {
|
|
clip-path: inset(75% 0 5% 0);
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
20% {
|
|
clip-path: inset(10% 0 70% 0);
|
|
transform: translateX(-11px);
|
|
}
|
|
|
|
35%,
|
|
60% {
|
|
clip-path: inset(0 0 100% 0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
75% {
|
|
clip-path: inset(50% 0 30% 0);
|
|
transform: translateX(-7px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.glitch::before,
|
|
.glitch::after {
|
|
animation: none;
|
|
}
|
|
} |