62 lines
1.2 KiB
Plaintext
62 lines
1.2 KiB
Plaintext
|
.glitch-wrapper {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch {
|
||
|
|
@offset1: 2px;
|
||
|
|
@offset2: -2px;
|
||
|
|
@highlight1: #49FC00;
|
||
|
|
@highlight2: spin(@highlight1, 180);
|
||
|
|
|
||
|
|
color: white;
|
||
|
|
font-size: 150px;
|
||
|
|
text-transform: upercase;
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&::after {
|
||
|
|
content: attr(data-text);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #0B161E;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
left: @offset1;
|
||
|
|
text-shadow: -2px 0 @highlight1;
|
||
|
|
clip: rect(24px, 550px, 90px, 0);
|
||
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
left: @offset2;
|
||
|
|
text-shadow: -2px 0 @highlight2;
|
||
|
|
clip: rect(85px, 550px, 140px, 0);
|
||
|
|
animation: glitch-anim 2.5s infinite linear alternate-reverse;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.glitch-frames (@n: 20, @index: 0) when (@index <= @n) {
|
||
|
|
@keyframeSel: percentage(@index/@n);
|
||
|
|
@rand1: unit(round(`Math.random()*150`),px);
|
||
|
|
@rand2: unit(round(`Math.random()*150`), px);
|
||
|
|
@{keyframeSel} {
|
||
|
|
clip: rect(@rand1, 9999px, @rand2, 0);
|
||
|
|
}
|
||
|
|
.glitch-frames(@n, (@index + 1));
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes glitch-anim {
|
||
|
|
.glitch-frames(24);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes glitch-anim-2 {
|
||
|
|
.glitch-frames(30,2);
|
||
|
|
}
|