115 lines
2.1 KiB
CSS
115 lines
2.1 KiB
CSS
body {
|
|
overflow-x: hidden;
|
|
}
|
|
body * {
|
|
display: flex;
|
|
margin: auto;
|
|
}
|
|
script, style {
|
|
display: none;
|
|
}
|
|
p, pre {
|
|
line-height: 0.8;
|
|
font-size: 12px;
|
|
font-family: monospace;
|
|
}
|
|
pre {
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
div.banner {
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
width: 99vw;
|
|
margin: 10px 0px;
|
|
}
|
|
div.smallbanner {
|
|
height: 3.5ex;
|
|
}
|
|
div.bigbanner {
|
|
height: 21.5ex;
|
|
}
|
|
div.banner * {
|
|
margin: 0px;
|
|
}
|
|
div.banner p {
|
|
white-space: pre;
|
|
}
|
|
div.banner br {
|
|
display: block;
|
|
}
|
|
pre.banner {
|
|
position: relative;
|
|
margin-left: -100px;
|
|
animation-name: slide;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-direction: normal;
|
|
}
|
|
pre.banner.pause {
|
|
animation-play-state: paused;
|
|
}
|
|
pre.banner.reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
pre.banner.t0_5 {
|
|
animation-duration: 0.5s;
|
|
}
|
|
pre.banner.t1_0 {
|
|
animation-duration: 1s;
|
|
}
|
|
pre.banner.t1_5 {
|
|
animation-duration: 1.5s;
|
|
}
|
|
@keyframes slide {
|
|
from {left:0;}
|
|
to {left:2.4em;}
|
|
}
|
|
|
|
.mouse_container {
|
|
position: relative;
|
|
margin-left: 0px;
|
|
display: contents;
|
|
/*
|
|
border: 1px solid red;
|
|
margin-right: auto;
|
|
height: 8.5em;
|
|
width: 11.9em;
|
|
*/
|
|
width: fit-content;
|
|
}
|
|
pre.mouse {
|
|
--tmouse: 2s;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
margin: 0px;
|
|
opacity: 0;
|
|
animation-name: mouse;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tmouse);
|
|
animation-timing-function: linear;
|
|
animation-direction: normal;
|
|
}
|
|
pre.mouse:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
|
|
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}
|
|
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 30/100);}
|
|
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 40/100);}
|
|
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 50/100);}
|
|
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 60/100);}
|
|
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 70/100);}
|
|
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 80/100);}
|
|
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
|
|
@keyframes mouse {
|
|
0% {opacity: 1;}
|
|
10% {opacity: 1;}
|
|
10.1% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
|