nelle-observer/astro/public/styles/css/glitch.css

91 lines
2.2 KiB
CSS
Raw Normal View History

2024-08-05 02:22:31 -06:00
.glitch {
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
0.025em 0.04em 0 var(--glitch-3);
2024-08-05 02:33:45 -06:00
animation: glitch 742ms infinite;
2024-08-05 02:40:43 -06:00
color: var(--alt-accent-900);
background-color: rgba(0, 0, 0, 0.233);
2024-08-05 02:22:31 -06:00
}
.glitch span {
position: absolute;
top: 0;
left: 0;
}
.glitch span:first-child {
animation: glitch 500ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-0.04em, -0.03em);
opacity: 0.75;
}
.glitch span:last-child {
animation: glitch 375ms infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(0.04em, 0.03em);
opacity: 0.75;
}
2024-08-05 02:40:43 -06:00
.glitch-alt {
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
0.025em 0.04em 0 var(--glitch-3);
animation: glitch 742ms infinite;
color: var(--alt-accent-900);
}
.glitch-alt span {
position: absolute;
top: 0;
left: 0;
}
.glitch-alt span:first-child {
animation: glitch 500ms infinite;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translate(-0.04em, -0.03em);
opacity: 0.75;
}
.glitch-alt span:last-child {
animation: glitch 375ms infinite;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
transform: translate(0.04em, 0.03em);
opacity: 0.75;
}
2024-08-05 02:22:31 -06:00
@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
0.025em 0.04em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
15% {
text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
0.025em 0.04em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
16% {
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
-0.05em -0.05em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
49% {
text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
-0.05em -0.05em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
50% {
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
0 -0.04em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
99% {
text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
0 -0.04em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
2024-08-05 02:22:31 -06:00
100% {
text-shadow: -0.05em 0 0 var(--glitch-1), -0.025em -0.04em 0 var(--glitch-2),
-0.04em -0.025em 0 var(--glitch-3);
}
2024-08-05 02:40:43 -06:00
}