Add: glitch text animation
This commit is contained in:
parent
0ced0212ac
commit
b1abe19193
GPG key ID:
DB9689E9391DD156
1 changed files with 249 additions and 0 deletions
|
|
@ -241,3 +241,252 @@
|
|||
/* transition: all 0; */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*=================================================================
|
||||
Glitch text on 404 Page
|
||||
=================================================================*/
|
||||
|
||||
.glitch {
|
||||
position: relative;
|
||||
color: white;
|
||||
font-size: 8em;
|
||||
letter-spacing: 0.5em;
|
||||
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(80px, 9999px, 31px, 0);
|
||||
transform: skew(1deg);
|
||||
}
|
||||
5% {
|
||||
clip: rect(87px, 9999px, 12px, 0);
|
||||
transform: skew(0.31deg);
|
||||
}
|
||||
10% {
|
||||
clip: rect(34px, 9999px, 13px, 0);
|
||||
transform: skew(0.56deg);
|
||||
}
|
||||
15% {
|
||||
clip: rect(82px, 9999px, 74px, 0);
|
||||
transform: skew(0.69deg);
|
||||
}
|
||||
20% {
|
||||
clip: rect(1px, 9999px, 72px, 0);
|
||||
transform: skew(0.52deg);
|
||||
}
|
||||
25% {
|
||||
clip: rect(35px, 9999px, 54px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
30% {
|
||||
clip: rect(62px, 9999px, 2px, 0);
|
||||
transform: skew(0.17deg);
|
||||
}
|
||||
35% {
|
||||
clip: rect(6px, 9999px, 28px, 0);
|
||||
transform: skew(0.12deg);
|
||||
}
|
||||
40% {
|
||||
clip: rect(50px, 9999px, 85px, 0);
|
||||
transform: skew(0.88deg);
|
||||
}
|
||||
45% {
|
||||
clip: rect(34px, 9999px, 53px, 0);
|
||||
transform: skew(0.98deg);
|
||||
}
|
||||
50% {
|
||||
clip: rect(15px, 9999px, 58px, 0);
|
||||
transform: skew(0.15deg);
|
||||
}
|
||||
55% {
|
||||
clip: rect(20px, 9999px, 68px, 0);
|
||||
transform: skew(0.06deg);
|
||||
}
|
||||
60% {
|
||||
clip: rect(77px, 9999px, 52px, 0);
|
||||
transform: skew(0.02deg);
|
||||
}
|
||||
65% {
|
||||
clip: rect(20px, 9999px, 11px, 0);
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
70% {
|
||||
clip: rect(97px, 9999px, 57px, 0);
|
||||
transform: skew(0.17deg);
|
||||
}
|
||||
75% {
|
||||
clip: rect(1px, 9999px, 36px, 0);
|
||||
transform: skew(1deg);
|
||||
}
|
||||
80% {
|
||||
clip: rect(31px, 9999px, 63px, 0);
|
||||
transform: skew(0.49deg);
|
||||
}
|
||||
85% {
|
||||
clip: rect(80px, 9999px, 39px, 0);
|
||||
transform: skew(0.78deg);
|
||||
}
|
||||
90% {
|
||||
clip: rect(74px, 9999px, 60px, 0);
|
||||
transform: skew(0.96deg);
|
||||
}
|
||||
95% {
|
||||
clip: rect(97px, 9999px, 59px, 0);
|
||||
transform: skew(0.46deg);
|
||||
}
|
||||
100% {
|
||||
clip: rect(56px, 9999px, 84px, 0);
|
||||
transform: skew(0.12deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-anim2 {
|
||||
0% {
|
||||
clip: rect(39px, 9999px, 61px, 0);
|
||||
transform: skew(0.08deg);
|
||||
}
|
||||
5% {
|
||||
clip: rect(13px, 9999px, 77px, 0);
|
||||
transform: skew(0.62deg);
|
||||
}
|
||||
10% {
|
||||
clip: rect(16px, 9999px, 14px, 0);
|
||||
transform: skew(0.35deg);
|
||||
}
|
||||
15% {
|
||||
clip: rect(83px, 9999px, 24px, 0);
|
||||
transform: skew(0.81deg);
|
||||
}
|
||||
20% {
|
||||
clip: rect(70px, 9999px, 14px, 0);
|
||||
transform: skew(0.93deg);
|
||||
}
|
||||
25% {
|
||||
clip: rect(43px, 9999px, 88px, 0);
|
||||
transform: skew(0.05deg);
|
||||
}
|
||||
30% {
|
||||
clip: rect(60px, 9999px, 63px, 0);
|
||||
transform: skew(0.89deg);
|
||||
}
|
||||
35% {
|
||||
clip: rect(35px, 9999px, 11px, 0);
|
||||
transform: skew(0.87deg);
|
||||
}
|
||||
40% {
|
||||
clip: rect(10px, 9999px, 4px, 0);
|
||||
transform: skew(0.63deg);
|
||||
}
|
||||
45% {
|
||||
clip: rect(56px, 9999px, 51px, 0);
|
||||
transform: skew(0.12deg);
|
||||
}
|
||||
50% {
|
||||
clip: rect(22px, 9999px, 21px, 0);
|
||||
transform: skew(0.26deg);
|
||||
}
|
||||
55% {
|
||||
clip: rect(45px, 9999px, 80px, 0);
|
||||
transform: skew(0.56deg);
|
||||
}
|
||||
60% {
|
||||
clip: rect(65px, 9999px, 18px, 0);
|
||||
transform: skew(0.08deg);
|
||||
}
|
||||
65% {
|
||||
clip: rect(71px, 9999px, 89px, 0);
|
||||
transform: skew(0.38deg);
|
||||
}
|
||||
70% {
|
||||
clip: rect(89px, 9999px, 98px, 0);
|
||||
transform: skew(0.71deg);
|
||||
}
|
||||
75% {
|
||||
clip: rect(63px, 9999px, 3px, 0);
|
||||
transform: skew(0.75deg);
|
||||
}
|
||||
80% {
|
||||
clip: rect(4px, 9999px, 68px, 0);
|
||||
transform: skew(0.98deg);
|
||||
}
|
||||
85% {
|
||||
clip: rect(22px, 9999px, 85px, 0);
|
||||
transform: skew(0.8deg);
|
||||
}
|
||||
90% {
|
||||
clip: rect(28px, 9999px, 58px, 0);
|
||||
transform: skew(0.06deg);
|
||||
}
|
||||
95% {
|
||||
clip: rect(70px, 9999px, 12px, 0);
|
||||
transform: skew(0.99deg);
|
||||
}
|
||||
100% {
|
||||
clip: rect(11px, 9999px, 87px, 0);
|
||||
transform: skew(0.15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glitch-skew {
|
||||
0% {
|
||||
transform: skew(4deg);
|
||||
}
|
||||
10% {
|
||||
transform: skew(5deg);
|
||||
}
|
||||
20% {
|
||||
transform: skew(1deg);
|
||||
}
|
||||
30% {
|
||||
transform: skew(1deg);
|
||||
}
|
||||
40% {
|
||||
transform: skew(5deg);
|
||||
}
|
||||
50% {
|
||||
transform: skew(1deg);
|
||||
}
|
||||
60% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: skew(3deg);
|
||||
}
|
||||
80% {
|
||||
transform: skew(4deg);
|
||||
}
|
||||
90% {
|
||||
transform: skew(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: skew(-1deg);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue