49 lines
900 B
CSS
49 lines
900 B
CSS
@import "./mouses/mouse_1.css";
|
|
@import "./mouses/mouse_2.css";
|
|
@import "./mouses/mouse_3.css";
|
|
@import "./mouses/mouse_4.css";
|
|
|
|
.mouse {
|
|
margin: auto;
|
|
width: fit-content;
|
|
overflow: hidden;
|
|
|
|
> div {
|
|
position: relative;
|
|
top: 0%;
|
|
|
|
/*
|
|
* for pseudo elements ::before and ::after
|
|
* for some reason it does not work when applied to them directly
|
|
* if they are not position absolute
|
|
*/
|
|
white-space: pre;
|
|
line-height: 0.8;
|
|
font-size: 1.0rem;
|
|
|
|
--tframes: 2s;
|
|
animation-name: mouse_move;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tframes);
|
|
animation-direction: normal;
|
|
animation-timing-function: steps(1);
|
|
}
|
|
> div::before {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
> div::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0px;
|
|
}
|
|
}
|
|
@keyframes mouse_move {
|
|
0% {top: 0%;}
|
|
25% {top: -100%;}
|
|
50% {top: -200%;}
|
|
75% {top: -300%;}
|
|
}
|