html, body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
font-family: "Medula One", sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span:first-child {
margin-right: 20px;
}
span:last-child {
animation: fadeWhite 4s forwards;
animation-delay: 2s;
position: relative;
}
span:last-child:after {
content: "Фамилия";
position: absolute;
left: 2px;
top: 2px;
clip: rect(0, 900px, 0, 0);
animation: glitch 3s infinite alternate-reverse;
animation-delay: 4s;
}
span:last-child:before {
content: "Фамилия";
position: absolute;
left: -2px;
top: -2px;
clip: rect(0, 900px, 0, 0);
animation: glitch 3s infinite alternate-reverse;
animation-delay: 4s;
}
@keyframes fadeWhite {
100% {
color: white;
}
}
@keyframes glitch {
0% {
clip: rect(76px, 9999px, 25px, 0);
}
5% {
clip: rect(56px, 9999px, 75px, 0);
}
10% {
clip: rect(34px, 9999px, 86px, 0);
}
15% {
clip: rect(26px, 9999px, 49px, 0);
}
20% {
clip: rect(95px, 9999px, 6px, 0);
}
25% {
clip: rect(20px, 9999px, 40px, 0);
}
30% {
clip: rect(94px, 9999px, 64px, 0);
}
35% {
clip: rect(89px, 9999px, 62px, 0);
}
40% {
clip: rect(60px, 9999px, 4px, 0);
}
45% {
clip: rect(21px, 9999px, 79px, 0);
}
50% {
clip: rect(50px, 9999px, 82px, 0);
}
55% {
clip: rect(78px, 9999px, 51px, 0);
}
60% {
clip: rect(41px, 9999px, 90px, 0);
}
65% {
clip: rect(4px, 9999px, 98px, 0);
}
70% {
clip: rect(11px, 9999px, 25px, 0);
}
75% {
clip: rect(72px, 9999px, 29px, 0);
}
80% {
clip: rect(8px, 9999px, 85px, 0);
}
85% {
clip: rect(65px, 9999px, 59px, 0);
}
90% {
clip: rect(45px, 9999px, 15px, 0);
}
95% {
clip: rect(27px, 9999px, 100px, 0);
}
100% {
clip: rect(82px, 9999px, 6px, 0);
}
}