102 lines
2.1 KiB
CSS
102 lines
2.1 KiB
CSS
@keyframes moveBackground {
|
|
from {
|
|
background-position-x: 0%;
|
|
} to {
|
|
background-position-x: 500%;
|
|
}
|
|
}
|
|
@keyframes moveBackgroundSPEED {
|
|
from {
|
|
background-position-x: 0%;
|
|
left:-2500vw;
|
|
} to {
|
|
background-position-x: 500%;
|
|
left:150vw;
|
|
}
|
|
}
|
|
|
|
@keyframes slidefunny {
|
|
from {
|
|
opacity:0;
|
|
filter:blur(10px);
|
|
scale: .9;
|
|
}
|
|
to {
|
|
opacity:1;
|
|
filter:blur(0px);
|
|
scale: 1;
|
|
}
|
|
}
|
|
|
|
.rainbowText {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
background-size: 500%, 100%;
|
|
animation: moveBackground 20s linear infinite;
|
|
}
|
|
|
|
.speedRainbowText {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
background-size: 500%, 100%;
|
|
animation: moveBackgroundSPEED 20s linear infinite;
|
|
bottom:19vh;
|
|
left:2vw;
|
|
overflow:hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ownRainbow {
|
|
background-image: linear-gradient(-45deg, hsl(360, 100%, 60%) 10%, hsl(270, 100%, 60%), rgb(51, 139, 255) 50%, hsl(270, 100%, 60%) 70%, hsl(360, 100%, 60%) 100%);
|
|
}
|
|
|
|
.code {
|
|
font-family: 'Roboto Mono';
|
|
z-index:0;
|
|
font-size:1.7vmin;
|
|
position:fixed;
|
|
margin-top:30px;
|
|
color: rgba(255,255,255,0.5);
|
|
opacity:.75;
|
|
pointer-events: none;
|
|
}
|
|
.tab {
|
|
margin-right: 3vmin;
|
|
}
|
|
|
|
.main {
|
|
opacity:0;
|
|
filter:blur(10px);
|
|
scale: .9;
|
|
animation-name: slidefunny;
|
|
animation-duration: 5s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-delay: 0s;
|
|
animation-fill-mode: forwards;
|
|
animation-iteration-count: 1;
|
|
animation-direction: normal;
|
|
max-width: 100vw;
|
|
max-height:100vh;
|
|
width: 100vw;
|
|
height:100vh;
|
|
display: block;
|
|
position:fixed;
|
|
z-index:1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.actualbackgroundfunny {
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPklEQVQYV2NkwAT/gUKM6MLoAjBFGIqRFaJLovBhCrFaB7QeLg5SiEsRzJlgeQxHY/EcSOg/sQoxgwGHiQwA+f4KCL3Y/AQAAAAASUVORK5CYII=) repeat;
|
|
width:100%;
|
|
height:100%;
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
z-index:0;
|
|
filter:grayscale(100%);
|
|
opacity:.1;
|
|
scale:1.4;
|
|
display:block;
|
|
} |