102 lines
2.4 KiB
SCSS
102 lines
2.4 KiB
SCSS
.glitch-image:hover, .glitch:hover, a:hover {
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.glitch-image {
|
|
animation: shift 3s ease-in-out .2s alternate 5;
|
|
}
|
|
|
|
.glitch, a:hover {
|
|
position: relative;
|
|
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary), 0.025em 0.04em 0 var(--primary-inverse);
|
|
animation: glitch 2s ease alternate 5, shift 2s ease alternate 5;
|
|
|
|
&::before, &::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&::before {
|
|
animation: glitch 1s infinite;
|
|
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
|
transform: translate(-0.04em, -0.03em);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
&::after {
|
|
animation: glitch .5s infinite;
|
|
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
|
transform: translate(0.04em, 0.03em);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
|
|
0.025em 0.04em 0 var(--primary-inverse);
|
|
}
|
|
15% {
|
|
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary),
|
|
0.025em 0.04em 0 var(--primary-inverse);
|
|
}
|
|
16% {
|
|
text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
|
|
-0.05em -0.05em 0 var(--primary-inverse);
|
|
}
|
|
49% {
|
|
text-shadow: -0.05em -0.025em 0 var(--primary-hover), 0.025em 0.035em 0 var(--primary),
|
|
-0.05em -0.05em 0 var(--primary-inverse);
|
|
}
|
|
50% {
|
|
text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
|
|
0 -0.04em 0 var(--primary-inverse);
|
|
}
|
|
99% {
|
|
text-shadow: 0.05em 0.035em 0 var(--primary-hover), 0.03em 0 0 var(--primary),
|
|
0 -0.04em 0 var(--primary-inverse);
|
|
}
|
|
100% {
|
|
text-shadow: -0.05em 0 0 var(--primary-hover), -0.025em -0.04em 0 var(--primary),
|
|
-0.04em -0.025em 0 var(--primary-inverse);
|
|
}
|
|
}
|
|
|
|
@keyframes shift {
|
|
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
|
|
transform: skewX(0deg);
|
|
filter: invert(0%);
|
|
fill: var(--text-color);
|
|
}
|
|
41% {
|
|
transform: skewX(50deg);
|
|
fill: var(--primary);
|
|
}
|
|
42% {
|
|
transform: skewX(-20deg);
|
|
filter: invert(40%);
|
|
}
|
|
59% {
|
|
transform: skewX(50deg);
|
|
fill: var(--primary-hover);
|
|
}
|
|
60% {
|
|
transform: skewX(-40deg);
|
|
filter: invert(10%);
|
|
}
|
|
63% {
|
|
transform: skewX(10deg);
|
|
filter: invert(30%);
|
|
fill: var(--primary-hover);
|
|
}
|
|
70% {
|
|
transform: skewX(-30deg);
|
|
fill: var(--primary);
|
|
}
|
|
71% {
|
|
transform: skewX(15deg);
|
|
filter: invert(100%);
|
|
}
|
|
}
|