37 lines
699 B
CSS
37 lines
699 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;
|
|
}
|
|
.mouse .frames {
|
|
position: relative;
|
|
animation: mouse_move infinite 2s normal steps(4);
|
|
}
|
|
.mouse .frames::before {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.mouse .frames::after {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0px;
|
|
}
|
|
|
|
/*
|
|
* using 'transform' instead of 'top', because 'top' needs
|
|
* the parent to have an explicit height
|
|
* but in this case its height is according to the children
|
|
*
|
|
*/
|
|
@keyframes mouse_move {
|
|
0% {transform: translateY(0%);}
|
|
100% {transform: translateY(-400%);}
|
|
}
|
|
|