880 lines
26 KiB
CSS
880 lines
26 KiB
CSS
@font-face {
|
|
font-family: '28 Days Later';
|
|
src: url('28DaysLater.woff2') format('woff2'),
|
|
url('28DaysLater.woff') format('woff'),
|
|
url('28DaysLater.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Computer Aid';
|
|
src: url('ComputerAid.woff2') format('woff2'),
|
|
url('ComputerAid.woff') format('woff'),
|
|
url('ComputerAid.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cyberdyne';
|
|
src: url('Cyberdyne.woff2') format('woff2'),
|
|
url('Cyberdyne.woff') format('woff'),
|
|
url('Cyberdyne.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Avengeance Heroic Avenger';
|
|
src: url('AvengeanceHeroicAvengerNormal.woff2') format('woff2'),
|
|
url('AvengeanceHeroicAvengerNormal.woff') format('woff'),
|
|
url('AvengeanceHeroicAvengerNormal.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cheap Fire';
|
|
src: url('CheapFire.woff2') format('woff2'),
|
|
url('CheapFire.woff') format('woff'),
|
|
url('CheapFire.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: '1942 report';
|
|
src: url('1942report.woff2') format('woff2'),
|
|
url('1942report.woff') format('woff'),
|
|
url('1942report.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cyberdyne Outline';
|
|
src: url('CyberdyneOutline.woff2') format('woff2'),
|
|
url('CyberdyneOutline.woff') format('woff'),
|
|
url('CyberdyneOutline.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: '`DragonForcE\'';
|
|
src: url('DragonForcE.woff2') format('woff2'),
|
|
url('DragonForcE.woff') format('woff'),
|
|
url('DragonForcE.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Distorter Demo';
|
|
src: url('DistorterDemoRegular.woff2') format('woff2'),
|
|
url('DistorterDemoRegular.woff') format('woff'),
|
|
url('DistorterDemoRegular.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SEGA LOGO FONT';
|
|
src: url('SEGA.woff2') format('woff2'),
|
|
url('SEGA.woff') format('woff'),
|
|
url('SEGA.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Windows Command Prompt';
|
|
src: url('Windows-Command-Prompt.woff2') format('woff2'),
|
|
url('Windows-Command-Prompt.woff') format('woff'),
|
|
url('Windows-Command-Prompt.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'electrical';
|
|
src: url('electrical.woff2') format('woff2'),
|
|
url('electrical.woff') format('woff'),
|
|
url('electrical.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.glitch {
|
|
position: relative;
|
|
color: #fff;
|
|
margin: 0 8.6%;
|
|
}
|
|
|
|
.glitch h1 {
|
|
line-height: 110%;
|
|
}
|
|
|
|
.line:not(:first-child) {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.line:nth-child(1) {
|
|
-webkit-animation: clip 3000ms -300ms linear infinite, glitch1 500ms -150ms linear infinite;
|
|
animation: clip 3000ms -300ms linear infinite, glitch1 500ms -150ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch1 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-1px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(5px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch1 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-1px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(5px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(2) {
|
|
-webkit-animation: clip 3000ms -600ms linear infinite, glitch2 500ms -111ms linear infinite;
|
|
animation: clip 3000ms -600ms linear infinite, glitch2 500ms -111ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch2 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(4px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-2px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch2 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(4px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-2px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(3) {
|
|
-webkit-animation: clip 3000ms -900ms linear infinite, glitch3 500ms -303ms linear infinite;
|
|
animation: clip 3000ms -900ms linear infinite, glitch3 500ms -303ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch3 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(0px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch3 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(0px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(4) {
|
|
-webkit-animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -337ms linear infinite;
|
|
animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -337ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch4 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-1px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch4 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-1px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(5) {
|
|
-webkit-animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -273ms linear infinite;
|
|
animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -273ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch5 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-2px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch5 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(-2px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(6) {
|
|
-webkit-animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -58ms linear infinite;
|
|
animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -58ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch6 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(0px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(2px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch6 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(0px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(2px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(7) {
|
|
-webkit-animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -431ms linear infinite;
|
|
animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -431ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch7 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-4px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch7 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(4px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-4px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(8) {
|
|
-webkit-animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -138ms linear infinite;
|
|
animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -138ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch8 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(1px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(0px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch8 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(1px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(2px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(0px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(9) {
|
|
-webkit-animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -762ms linear infinite;
|
|
animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -762ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch9 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(2px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch9 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(2px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(-1px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.line:nth-child(10) {
|
|
-webkit-animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -462ms linear infinite;
|
|
animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -462ms linear infinite;
|
|
}
|
|
@-webkit-keyframes glitch10 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(3px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes glitch10 {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
80% {
|
|
transform: translateX(0);
|
|
color: #fff;
|
|
}
|
|
85% {
|
|
transform: translateX(3px);
|
|
color: #4E9A26;
|
|
}
|
|
90% {
|
|
transform: translateX(-3px);
|
|
color: #AC1212;
|
|
}
|
|
95% {
|
|
transform: translateX(4px);
|
|
color: #fff;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes clip {
|
|
0% {
|
|
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
|
clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
|
}
|
|
100% {
|
|
-webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
|
clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
|
}
|
|
}
|
|
|
|
@keyframes clip {
|
|
0% {
|
|
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
|
clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
|
|
}
|
|
100% {
|
|
-webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
|
clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
|
|
}
|
|
}
|
|
|
|
|
|
.btn-link.left:hover, .btn-link.right:hover {
|
|
opacity: 1;
|
|
-webkit-animation:flicker-in-2 2s linear both;animation:flicker-in-2 2s linear both
|
|
|
|
}
|
|
|
|
@-webkit-keyframes flicker-in-2{0%{opacity:0}10%{opacity:0;-webkit-box-shadow:none;box-shadow:none}10.1%{opacity:1;-webkit-box-shadow:none;box-shadow:none}10.2%{opacity:0;-webkit-box-shadow:none;box-shadow:none}20%{opacity:0;-webkit-box-shadow:none;box-shadow:none}20.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;-webkit-box-shadow:none;box-shadow:none}30%{opacity:0;-webkit-box-shadow:none;box-shadow:none}30.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;-webkit-box-shadow:none;box-shadow:none}45%{opacity:0;-webkit-box-shadow:none;box-shadow:none}45.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}57%{opacity:0;-webkit-box-shadow:none;box-shadow:none}57.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3)}60%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3)}60.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}65%{opacity:0;-webkit-box-shadow:none;box-shadow:none}65.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}77%{opacity:0;-webkit-box-shadow:none;box-shadow:none}77.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}86%{opacity:0;-webkit-box-shadow:none;box-shadow:none}86.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes flicker-in-2{0%{opacity:0}10%{opacity:0;-webkit-box-shadow:none;box-shadow:none}10.1%{opacity:1;-webkit-box-shadow:none;box-shadow:none}10.2%{opacity:0;-webkit-box-shadow:none;box-shadow:none}20%{opacity:0;-webkit-box-shadow:none;box-shadow:none}20.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;-webkit-box-shadow:none;box-shadow:none}30%{opacity:0;-webkit-box-shadow:none;box-shadow:none}30.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;-webkit-box-shadow:none;box-shadow:none}45%{opacity:0;-webkit-box-shadow:none;box-shadow:none}45.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25);box-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}57%{opacity:0;-webkit-box-shadow:none;box-shadow:none}57.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3)}60%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3)}60.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}65%{opacity:0;-webkit-box-shadow:none;box-shadow:none}65.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.3),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}77%{opacity:0;-webkit-box-shadow:none;box-shadow:none}77.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;-webkit-box-shadow:none;box-shadow:none}86%{opacity:0;-webkit-box-shadow:none;box-shadow:none}86.1%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;-webkit-box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1);box-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}
|
|
|
|
.btn-link {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: #f4f4f4;
|
|
font-size: 15px;
|
|
letter-spacing: 0.02em;
|
|
text-decoration: none;
|
|
z-index: 1;
|
|
opacity:.3;
|
|
}
|
|
.btn-link:before,
|
|
.btn-link:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.btn-link:before {
|
|
background-color: #00ffff;
|
|
z-index: -1;
|
|
}
|
|
.btn-link:after {
|
|
background-color: #ff00ff;
|
|
z-index: -2;
|
|
}
|
|
.btn-link:hover .link-inner {
|
|
-webkit-animation: glitchy 0.3s ease 1;
|
|
animation: glitchy 0.3s ease 1;
|
|
}
|
|
.btn-link:hover:before {
|
|
-webkit-animation: glitchy 0.3s ease 0.3s infinite;
|
|
animation: glitchy 0.3s ease 0.3s infinite;
|
|
}
|
|
.btn-link:hover:after {
|
|
animation: glitchy 0.3s ease infinite reverse;
|
|
}
|
|
.link-inner {
|
|
display: block;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
padding: 15px 25px;
|
|
}
|
|
.text-link {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
z-index: 1;
|
|
text-align: center;
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow:hidden;
|
|
}
|
|
.text-link:before,
|
|
.text-link:after {
|
|
content: attr(data-content);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.text-link:before {
|
|
color: #00ffff;
|
|
z-index: -1;
|
|
}
|
|
.text-link:after {
|
|
color: #ff00ff;
|
|
z-index: -2;
|
|
}
|
|
.text-link:hover:before {
|
|
-webkit-animation: glitchy 0.3s ease 0.3s infinite;
|
|
animation: glitchy 0.3s ease 0.3s infinite;
|
|
}
|
|
.text-link:hover:after {
|
|
animation: glitchy 0.3s ease infinite reverse;
|
|
}
|
|
.line-link {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 24px;
|
|
text-decoration: none;
|
|
letter-spacing: 0.1em;
|
|
color: #fff;
|
|
font-weight: lighter;
|
|
z-index: 1;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.75);
|
|
padding-bottom: 10px;
|
|
}
|
|
.line-link:before,
|
|
.line-link:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
visibility: hidden;
|
|
}
|
|
.line-link:before {
|
|
background-color: #00ffff;
|
|
z-index: -1;
|
|
}
|
|
.line-link:after {
|
|
background-color: #ff00ff;
|
|
z-index: -2;
|
|
}
|
|
.line-link:hover:before {
|
|
visibility: visible;
|
|
-webkit-animation: line-glitchy 0.3s ease 0.3s infinite;
|
|
animation: line-glitchy 0.3s ease 0.3s infinite;
|
|
}
|
|
.line-link:hover:after {
|
|
visibility: visible;
|
|
animation: line-glitchy 0.3s ease infinite reverse;
|
|
}
|
|
@-webkit-keyframes glitchy {
|
|
0% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
25% {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
50% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
75% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
100% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
}
|
|
@keyframes glitchy {
|
|
0% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
25% {
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
50% {
|
|
transform: translate(2px, 2px);
|
|
}
|
|
75% {
|
|
transform: translate(2px, -2px);
|
|
}
|
|
100% {
|
|
transform: translate(-2px, 2px);
|
|
}
|
|
}
|
|
@-webkit-keyframes line-glitchy {
|
|
0% {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
25% {
|
|
transform: translate(-1px, -1px);
|
|
}
|
|
50% {
|
|
transform: translate(1px, 1px);
|
|
}
|
|
75% {
|
|
transform: translate(1px, -1px);
|
|
}
|
|
100% {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
}
|
|
@keyframes line-glitchy {
|
|
0% {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
25% {
|
|
transform: translate(-1px, -1px);
|
|
}
|
|
50% {
|
|
transform: translate(1px, 1px);
|
|
}
|
|
75% {
|
|
transform: translate(1px, -1px);
|
|
}
|
|
100% {
|
|
transform: translate(-1px, 1px);
|
|
}
|
|
}
|
|
|
|
|