You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
683 lines
13 KiB
683 lines
13 KiB
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrap {
|
|
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
|
|
-moz-animation: noise 0.3s infinite;
|
|
-webkit-animation: noise 0.3s infinite;
|
|
animation: noise 0.3s infinite;
|
|
background-size: contain;
|
|
height: 100vh;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.glitch {
|
|
font-family: 'vt-323';
|
|
font-weight: 600;
|
|
color: white;
|
|
font-size: 60px;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
|
|
-webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
|
|
animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
|
|
-webkit-transform: skewX(0deg);
|
|
transform: skewX(0deg);
|
|
}
|
|
.wrap:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
|
|
-moz-animation: bar 0.5s infinite;
|
|
-webkit-animation: bar 0.5s infinite;
|
|
animation: bar 0.5s infinite;
|
|
}
|
|
@-webkit-keyframes blur {
|
|
0%,40%, 50%, 60%, 90%, 95%, 100% {
|
|
text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
|
|
}
|
|
45%, 75% {
|
|
text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
|
|
}
|
|
97.5% {
|
|
text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
@keyframes blur {
|
|
0%,40%, 50%, 60%, 90%, 95%, 100% {
|
|
text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
|
|
}
|
|
45%, 75% {
|
|
text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
|
|
}
|
|
97.5% {
|
|
text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
.glitch:after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
left: 3px;
|
|
text-shadow: -1px 0 red;
|
|
top: 0;
|
|
color: transparent;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
clip: rect(0, 900px, 0, 0);
|
|
-webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
|
|
animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
|
|
-webkit-transform: skewX(0deg);
|
|
transform: skewX(0deg);
|
|
z-index: -2;
|
|
opacity: .7;
|
|
}
|
|
|
|
.glitch:before {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
left: 1px;
|
|
text-shadow: -3px 0 cyan;
|
|
top: 0;
|
|
color: transparent;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
clip: rect(0, 900px, 0, 0);
|
|
-webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
|
|
animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
|
|
-webkit-transform: skewX(0deg);
|
|
transform: skewX(0deg);
|
|
z-index: -1;
|
|
opacity: .8;
|
|
}
|
|
|
|
@-webkit-keyframes noise-anim {
|
|
0% {
|
|
clip: rect(8px, 9999px, 66px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(27px, 9999px, 62px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(86px, 9999px, 14px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(25px, 9999px, 44px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(60px, 9999px, 59px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(29px, 9999px, 55px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(20px, 9999px, 96px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(98px, 9999px, 33px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(10px, 9999px, 44px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(49px, 9999px, 28px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(6px, 9999px, 35px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(18px, 9999px, 14px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(29px, 9999px, 22px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(86px, 9999px, 65px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(29px, 9999px, 81px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(1px, 9999px, 32px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(66px, 9999px, 37px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(16px, 9999px, 4px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(12px, 9999px, 54px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(14px, 9999px, 88px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(26px, 9999px, 26px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes noise-anim {
|
|
0% {
|
|
clip: rect(8px, 9999px, 66px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(27px, 9999px, 62px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(86px, 9999px, 14px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(25px, 9999px, 44px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(60px, 9999px, 59px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(29px, 9999px, 55px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(20px, 9999px, 96px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(98px, 9999px, 33px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(10px, 9999px, 44px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(49px, 9999px, 28px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(6px, 9999px, 35px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(18px, 9999px, 14px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(29px, 9999px, 22px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(86px, 9999px, 65px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(29px, 9999px, 81px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(1px, 9999px, 32px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(66px, 9999px, 37px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(16px, 9999px, 4px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(12px, 9999px, 54px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(14px, 9999px, 88px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(26px, 9999px, 26px, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes noise-anim-2 {
|
|
0% {
|
|
clip: rect(53px, 9999px, 81px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(40px, 9999px, 55px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(72px, 9999px, 65px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(68px, 9999px, 46px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(55px, 9999px, 36px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(96px, 9999px, 39px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(7px, 9999px, 6px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(37px, 9999px, 59px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(69px, 9999px, 58px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(98px, 9999px, 94px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(35px, 9999px, 41px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(76px, 9999px, 40px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(91px, 9999px, 74px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(75px, 9999px, 57px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(62px, 9999px, 45px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(100px, 9999px, 34px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(56px, 9999px, 9px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(27px, 9999px, 87px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(84px, 9999px, 27px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(27px, 9999px, 34px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(44px, 9999px, 79px, 0);
|
|
}
|
|
}
|
|
@keyframes noise-anim-2 {
|
|
0% {
|
|
clip: rect(53px, 9999px, 81px, 0);
|
|
}
|
|
5% {
|
|
clip: rect(40px, 9999px, 55px, 0);
|
|
}
|
|
10% {
|
|
clip: rect(72px, 9999px, 65px, 0);
|
|
}
|
|
15% {
|
|
clip: rect(68px, 9999px, 46px, 0);
|
|
}
|
|
20% {
|
|
clip: rect(55px, 9999px, 36px, 0);
|
|
}
|
|
25% {
|
|
clip: rect(96px, 9999px, 39px, 0);
|
|
}
|
|
30% {
|
|
clip: rect(7px, 9999px, 6px, 0);
|
|
}
|
|
35% {
|
|
clip: rect(37px, 9999px, 59px, 0);
|
|
}
|
|
40% {
|
|
clip: rect(69px, 9999px, 58px, 0);
|
|
}
|
|
45% {
|
|
clip: rect(98px, 9999px, 94px, 0);
|
|
}
|
|
50% {
|
|
clip: rect(35px, 9999px, 41px, 0);
|
|
}
|
|
55% {
|
|
clip: rect(76px, 9999px, 40px, 0);
|
|
}
|
|
60% {
|
|
clip: rect(91px, 9999px, 74px, 0);
|
|
}
|
|
65% {
|
|
clip: rect(75px, 9999px, 57px, 0);
|
|
}
|
|
70% {
|
|
clip: rect(62px, 9999px, 45px, 0);
|
|
}
|
|
75% {
|
|
clip: rect(100px, 9999px, 34px, 0);
|
|
}
|
|
80% {
|
|
clip: rect(56px, 9999px, 9px, 0);
|
|
}
|
|
85% {
|
|
clip: rect(27px, 9999px, 87px, 0);
|
|
}
|
|
90% {
|
|
clip: rect(84px, 9999px, 27px, 0);
|
|
}
|
|
95% {
|
|
clip: rect(27px, 9999px, 34px, 0);
|
|
}
|
|
100% {
|
|
clip: rect(44px, 9999px, 79px, 0);
|
|
}
|
|
}
|
|
@-webkit-keyframes shift {
|
|
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
|
|
-webkit-transform: skewX(0deg);
|
|
transform: skewX(0deg);
|
|
}
|
|
41% {
|
|
-webkit-transform: skewX(10deg);
|
|
transform: skewX(10deg);
|
|
}
|
|
42% {
|
|
-webkit-transform: skewX(-10deg);
|
|
transform: skewX(-10deg);
|
|
}
|
|
59% {
|
|
-webkit-transform: skewX(40deg) skewY(10deg);
|
|
transform: skewX(40deg) skewY(10deg);
|
|
}
|
|
60% {
|
|
-webkit-transform: skewX(-40deg) skewY(-10deg);
|
|
transform: skewX(-40deg) skewY(-10deg);
|
|
}
|
|
63% {
|
|
-webkit-transform: skewX(10deg) skewY(-5deg);
|
|
transform: skewX(10deg) skewY(-5deg);
|
|
}
|
|
70% {
|
|
-webkit-transform: skewX(-50deg) skewY(-20deg);
|
|
transform: skewX(-50deg) skewY(-20deg);
|
|
}
|
|
71% {
|
|
-webkit-transform: skewX(10deg) skewY(-10deg);
|
|
transform: skewX(10deg) skewY(-10deg);
|
|
}
|
|
}
|
|
@keyframes shift {
|
|
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
|
|
-webkit-transform: skewX(0deg);
|
|
transform: skewX(0deg);
|
|
}
|
|
41% {
|
|
-webkit-transform: skewX(10deg);
|
|
transform: skewX(10deg);
|
|
}
|
|
42% {
|
|
-webkit-transform: skewX(-10deg);
|
|
transform: skewX(-10deg);
|
|
}
|
|
59% {
|
|
-webkit-transform: skewX(40deg) skewY(10deg);
|
|
transform: skewX(40deg) skewY(10deg);
|
|
}
|
|
60% {
|
|
-webkit-transform: skewX(-40deg) skewY(-10deg);
|
|
transform: skewX(-40deg) skewY(-10deg);
|
|
}
|
|
63% {
|
|
-webkit-transform: skewX(10deg) skewY(-5deg);
|
|
transform: skewX(10deg) skewY(-5deg);
|
|
}
|
|
70% {
|
|
-webkit-transform: skewX(-50deg) skewY(-20deg);
|
|
transform: skewX(-50deg) skewY(-20deg);
|
|
}
|
|
71% {
|
|
-webkit-transform: skewX(10deg) skewY(-10deg);
|
|
transform: skewX(10deg) skewY(-10deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes noise {
|
|
0% {
|
|
background-position: 49px 45px;
|
|
}
|
|
10% {
|
|
background-position: 12px 22px;
|
|
}
|
|
20% {
|
|
background-position: -81px 32px;
|
|
}
|
|
30% {
|
|
background-position: 52px -87px;
|
|
}
|
|
40% {
|
|
background-position: 33px 46px;
|
|
}
|
|
50% {
|
|
background-position: 6px -83px;
|
|
}
|
|
60% {
|
|
background-position: 23px 26px;
|
|
}
|
|
70% {
|
|
background-position: -97px -75px;
|
|
}
|
|
80% {
|
|
background-position: -49px 89px;
|
|
}
|
|
90% {
|
|
background-position: 69px -23px;
|
|
}
|
|
}
|
|
@-webkit-keyframes noise {
|
|
0% {
|
|
background-position: -84px -42px;
|
|
}
|
|
10% {
|
|
background-position: 91px -12px;
|
|
}
|
|
20% {
|
|
background-position: -19px 24px;
|
|
}
|
|
30% {
|
|
background-position: -62px 53px;
|
|
}
|
|
40% {
|
|
background-position: 83px -50px;
|
|
}
|
|
50% {
|
|
background-position: -80px 39px;
|
|
}
|
|
60% {
|
|
background-position: 62px -67px;
|
|
}
|
|
70% {
|
|
background-position: -30px 51px;
|
|
}
|
|
80% {
|
|
background-position: 45px 8px;
|
|
}
|
|
90% {
|
|
background-position: -11px -20px;
|
|
}
|
|
}
|
|
@keyframes noise {
|
|
0% {
|
|
background-position: -50px -96px;
|
|
}
|
|
10% {
|
|
background-position: -51px -33px;
|
|
}
|
|
20% {
|
|
background-position: -81px 13px;
|
|
}
|
|
30% {
|
|
background-position: -4px -79px;
|
|
}
|
|
40% {
|
|
background-position: -7px -27px;
|
|
}
|
|
50% {
|
|
background-position: -58px 21px;
|
|
}
|
|
60% {
|
|
background-position: 86px -69px;
|
|
}
|
|
70% {
|
|
background-position: 97px 35px;
|
|
}
|
|
80% {
|
|
background-position: 5px -84px;
|
|
}
|
|
90% {
|
|
background-position: 19px -24px;
|
|
}
|
|
}
|
|
@-moz-keyframes bar {
|
|
0% {
|
|
height: 397px;
|
|
top: 72%;
|
|
opacity: 0.42;
|
|
}
|
|
10% {
|
|
height: 498px;
|
|
top: 60%;
|
|
opacity: 0.49;
|
|
}
|
|
20% {
|
|
height: 182px;
|
|
top: 18%;
|
|
opacity: 0.23;
|
|
}
|
|
30% {
|
|
height: 543px;
|
|
top: 18%;
|
|
opacity: 0.41;
|
|
}
|
|
40% {
|
|
height: 219px;
|
|
top: 58%;
|
|
opacity: 0.33;
|
|
}
|
|
50% {
|
|
height: 288px;
|
|
top: 6%;
|
|
opacity: 0.34;
|
|
}
|
|
60% {
|
|
height: 132px;
|
|
top: 42%;
|
|
opacity: 0.58;
|
|
}
|
|
70% {
|
|
height: 389px;
|
|
top: 77%;
|
|
opacity: 0.26;
|
|
}
|
|
80% {
|
|
height: 383px;
|
|
top: 68%;
|
|
opacity: 0.68;
|
|
}
|
|
90% {
|
|
height: 346px;
|
|
top: 86%;
|
|
opacity: 0.06;
|
|
}
|
|
}
|
|
@-webkit-keyframes bar {
|
|
0% {
|
|
height: 591px;
|
|
top: 86%;
|
|
opacity: 0.61;
|
|
}
|
|
10% {
|
|
height: 420px;
|
|
top: 54%;
|
|
opacity: 0.15;
|
|
}
|
|
20% {
|
|
height: 626px;
|
|
top: 24%;
|
|
opacity: 0.19;
|
|
}
|
|
30% {
|
|
height: 595px;
|
|
top: 87%;
|
|
opacity: 0.1;
|
|
}
|
|
40% {
|
|
height: 81px;
|
|
top: 29%;
|
|
opacity: 0.47;
|
|
}
|
|
50% {
|
|
height: 621px;
|
|
top: 23%;
|
|
opacity: 0.22;
|
|
}
|
|
60% {
|
|
height: 79px;
|
|
top: 67%;
|
|
opacity: 0.38;
|
|
}
|
|
70% {
|
|
height: 119px;
|
|
top: 37%;
|
|
opacity: 0.39;
|
|
}
|
|
80% {
|
|
height: 178px;
|
|
top: 48%;
|
|
opacity: 0.55;
|
|
}
|
|
90% {
|
|
height: 415px;
|
|
top: 72%;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
@keyframes bar {
|
|
0% {
|
|
height: 578px;
|
|
top: 100%;
|
|
opacity: 0.48;
|
|
}
|
|
10% {
|
|
height: 32px;
|
|
top: 24%;
|
|
opacity: 0.36;
|
|
}
|
|
20% {
|
|
height: 359px;
|
|
top: 15%;
|
|
opacity: 0.03;
|
|
}
|
|
30% {
|
|
height: 177px;
|
|
top: 43%;
|
|
opacity: 0.07;
|
|
}
|
|
40% {
|
|
height: 124px;
|
|
top: 52%;
|
|
opacity: 0.42;
|
|
}
|
|
50% {
|
|
height: 216px;
|
|
top: 34%;
|
|
opacity: 0.1;
|
|
}
|
|
60% {
|
|
height: 315px;
|
|
top: 30%;
|
|
opacity: 0.02;
|
|
}
|
|
70% {
|
|
height: 379px;
|
|
top: 30%;
|
|
opacity: 0.47;
|
|
}
|
|
80% {
|
|
height: 475px;
|
|
top: 100%;
|
|
opacity: 0.48;
|
|
}
|
|
90% {
|
|
height: 401px;
|
|
top: 98%;
|
|
opacity: 0.12;
|
|
}
|
|
}
|