.sub {
position: relative;
color: #f2f1f1;
font-size: calc(5vw + 10rem);
letter-spacing: -0.1em;
font-family: Graphik, Roboto, Arial, Helvetica, sans-serif;
}
.glitch {
position: relative;
color: #ffffff;
font-size:3em;
font-family: Graphik, Roboto, Arial, Helvetica, sans-serif;
letter-spacing: 0.1em;
animation: glitch-skew 1s infinite linear alternate-reverse;
}
.glitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 2px;
text-shadow: -2px 0 #ff00c1;
clip: rect(44px, 450px, 56px, 0);
animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -2px;
text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
animation: glitch-anim2 1s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% {
clip: rect(76px, 9999px, 51px, 0);
transform: skew(0.82deg);
}
5% {
clip: rect(92px, 9999px, 14px, 0);
transform: skew(0.9deg);
}
10% {
clip: rect(94px, 9999px, 68px, 0);
transform: skew(0.65deg);
}
15% {
clip: rect(98px, 9999px, 7px, 0);
transform: skew(0.5deg);
}
20% {
clip: rect(64px, 9999px, 47px, 0);
transform: skew(0.09deg);
}
25% {
clip: rect(17px, 9999px, 16px, 0);
transform: skew(0.02deg);
}
30% {
clip: rect(27px, 9999px, 3px, 0);
transform: skew(0.92deg);
}
35% {
clip: rect(76px, 9999px, 20px, 0);
transform: skew(0.38deg);
}
40% {
clip: rect(13px, 9999px, 51px, 0);
transform: skew(0.68deg);
}
45% {
clip: rect(90px, 9999px, 23px, 0);
transform: skew(0.84deg);
}
50% {
clip: rect(5px, 9999px, 54px, 0);
transform: skew(0.62deg);
}
55% {
clip: rect(79px, 9999px, 30px, 0);
transform: skew(0.84deg);
}
60% {
clip: rect(93px, 9999px, 76px, 0);
transform: skew(0.8deg);
}
65% {
clip: rect(5px, 9999px, 96px, 0);
transform: skew(0.46deg);
}
70% {
clip: rect(84px, 9999px, 12px, 0);
transform: skew(0.72deg);
}
75% {
clip: rect(93px, 9999px, 74px, 0);
transform: skew(0.54deg);
}
80% {
clip: rect(61px, 9999px, 71px, 0);
transform: skew(0.53deg);
}
85% {
clip: rect(2px, 9999px, 53px, 0);
transform: skew(0.24deg);
}
90% {
clip: rect(57px, 9999px, 60px, 0);
transform: skew(0.84deg);
}
95% {
clip: rect(97px, 9999px, 69px, 0);
transform: skew(0.12deg);
}
100% {
clip: rect(61px, 9999px, 98px, 0);
transform: skew(0.82deg);
}
}
@keyframes glitch-anim2 {
0% {
clip: rect(13px, 9999px, 13px, 0);
transform: skew(0.32deg);
}
5% {
clip: rect(65px, 9999px, 37px, 0);
transform: skew(0.45deg);
}
10% {
clip: rect(89px, 9999px, 86px, 0);
transform: skew(0.02deg);
}
15% {
clip: rect(90px, 9999px, 41px, 0);
transform: skew(0.74deg);
}
20% {
clip: rect(20px, 9999px, 16px, 0);
transform: skew(0.17deg);
}
25% {
clip: rect(94px, 9999px, 78px, 0);
transform: skew(0.18deg);
}
30% {
clip: rect(74px, 9999px, 26px, 0);
transform: skew(0.78deg);
}
35% {
clip: rect(35px, 9999px, 98px, 0);
transform: skew(0.18deg);
}
40% {
clip: rect(92px, 9999px, 32px, 0);
transform: skew(0.98deg);
}
45% {
clip: rect(55px, 9999px, 60px, 0);
transform: skew(0.4deg);
}
50% {
clip: rect(69px, 9999px, 56px, 0);
transform: skew(0.99deg);
}
55% {
clip: rect(84px, 9999px, 96px, 0);
transform: skew(0.68deg);
}
60% {
clip: rect(24px, 9999px, 18px, 0);
transform: skew(0.76deg);
}
65% {
clip: rect(75px, 9999px, 64px, 0);
transform: skew(0.54deg);
}
70% {
clip: rect(91px, 9999px, 49px, 0);
transform: skew(0.11deg);
}
75% {
clip: rect(17px, 9999px, 17px, 0);
transform: skew(0.66deg);
}
80% {
clip: rect(7px, 9999px, 45px, 0);
transform: skew(0.65deg);
}
85% {
clip: rect(89px, 9999px, 38px, 0);
transform: skew(0.1deg);
}
90% {
clip: rect(5px, 9999px, 28px, 0);
transform: skew(0.01deg);
}
95% {
clip: rect(77px, 9999px, 82px, 0);
transform: skew(0.72deg);
}
100% {
clip: rect(15px, 9999px, 43px, 0);
transform: skew(0.94deg);
}
}
@keyframes glitch-skew {
0% {
transform: skew(4deg);
}
10% {
transform: skew(-2deg);
}
20% {
transform: skew(-2deg);
}
30% {
transform: skew(1deg);
}
40% {
transform: skew(5deg);
}
50% {
transform: skew(3deg);
}
60% {
transform: skew(4deg);
}
70% {
transform: skew(-4deg);
}
80% {
transform: skew(4deg);
}
90% {
transform: skew(-1deg);
}
100% {
transform: skew(-1deg);
}
}
Rebeldes
Digitales
Rebeldes