63 lines
982 B
CSS
63 lines
982 B
CSS
|
|
.mouse {
|
|
position: relative;
|
|
margin: 20px 0px;
|
|
}
|
|
.frames_container {
|
|
display: grid;
|
|
width: fit-content;
|
|
/*
|
|
border: 1px solid blue;
|
|
*/
|
|
}
|
|
pre.frame.hide {
|
|
display: none;
|
|
}
|
|
pre.frame {
|
|
position: relative;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
margin: auto auto 0px 0px;
|
|
|
|
/*
|
|
width: fit-content;
|
|
height: fit-content;
|
|
|
|
border: 1px solid red;
|
|
*/
|
|
|
|
opacity: 0;
|
|
--tframes: 2s;
|
|
animation-name: ascii_frame;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tframes);
|
|
animation-timing-function: linear;
|
|
animation-direction: normal;
|
|
}
|
|
|
|
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
|
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
|
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
|
|
|
@keyframes ascii_frame {
|
|
0% {opacity: 1;}
|
|
25% {opacity: 1;}
|
|
25.1% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
|
|
#mouse_1 {
|
|
place-self: center;
|
|
margin: auto;
|
|
}
|
|
#mouse_2 {
|
|
left: 10%;
|
|
}
|
|
#mouse_3 {
|
|
left: 60%;
|
|
}
|
|
#mouse_4 {
|
|
left: 20%;
|
|
}
|
|
|