54 lines
899 B
CSS
54 lines
899 B
CSS
|
|
.mouse {
|
|
position: relative;
|
|
margin: 20px 0px;
|
|
}
|
|
.frames_container {
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
width: fit-content;
|
|
}
|
|
pre.frame.hide {
|
|
display: none;
|
|
}
|
|
pre.frame {
|
|
position: relative;
|
|
justify-items: start;
|
|
align-items: end;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
|
|
opacity: 0;
|
|
--tframes: 2s;
|
|
animation-name: ascii_frame;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tframes);
|
|
animation-timing-function: steps(3);
|
|
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;
|
|
}
|
|
#mouse_2 {
|
|
left: 10%;
|
|
}
|
|
#mouse_3 {
|
|
left: 60%;
|
|
}
|
|
#mouse_4 {
|
|
left: 20%;
|
|
}
|
|
|