complete modulation of html

This commit is contained in:
Hugo LAMY
2026-03-17 18:16:21 +01:00
parent 704483f6e6
commit d728897805
27 changed files with 2990 additions and 1686 deletions

View File

@@ -1,26 +1,24 @@
@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;
margin: auto;
width: fit-content;
overflow: hidden;
.frames {
position: relative;
animation: mouse_move infinite 2s normal steps(4);
&::before {
position: relative;
top: 0px;
left: 0px;
}
&::after {
position: absolute;
top: 100%;
left: 0px;
}
}
}
/*
@@ -30,7 +28,342 @@
*
*/
@keyframes mouse_move {
0% {transform: translateY(0%);}
100% {transform: translateY(-400%);}
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-400%);
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 1 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.mouse_1::before {
content: "\
 \a
   \a
      \a
       \a
          \a
       \a
     \a
     \a
     \a
     \a
        \a
        \a
     \a
      \a
    \a
    \a
";
}
.mouse_1::after {
content: "\
 \a
  \a
     \a
       \a
        \a
       \a
      \a
      \a
     \a
      \a
         \a
         \a
      \a
      \a
    \a
    \a
 \a
  \a
     \a
       \a
        \a
       \a
      \a
      \a
     \a
      \a
         \a
         \a
      \a
      \a
    \a
    \a
 \a
   \a
      \a
       \a
          \a
       \a
     \a
     \a
     \a
     \a
        \a
        \a
     \a
      \a
    \a
    \a
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 2 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.mouse_2::before {
content: "\
 \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
  \a
 \a
";
}
.mouse_2::after {
content: "\
  \a
   \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
 \a
 \a
  \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
  \a
 \a
 \a
  \a
   \a
  \a
 \a
  \a
  \a
  \a
  \a
    \a
    \a
  \a
     \a
    \a
 \a
 \a
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 3 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.mouse_3::before {
content: "\
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
   \a
   \a
    \a
   \a
  \a
";
}
.mouse_3::after {
content: "\
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
  \a
   \a
    \a
   \a
  \a
 \a
 \a
  \a
   \a
 \a
   \a
   \a
    \a
    \a
   \a
   \a
    \a
   \a
  \a
\a
\a
 \a
  \a
 \a
   \a
    \a
   \a
   \a
    \a
    \a
    \a
    \a
  \a
";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *
* *
* *
* *
* MOUSE 4 *
* *
* *
* *
* *
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.mouse_4::before {
content: "\
 \a
 \a
  \a
  \a
    \a
      \a
     \a
   \a
    \a
   \a
    \a
   \a
  \a
 \a
";
}
.mouse_4::after {
content: "\
 \a
 \a
  \a
  \a
    \a
     \a
     \a
    \a
    \a
   \a
    \a
  \a
  \a
 \a
 \a
 \a
  \a
   \a
    \a
     \a
      \a
    \a
    \a
   \a
    \a
  \a
  \a
 \a
 \a
 \a
  \a
   \a
    \a
      \a
      \a
   \a
    \a
   \a
    \a
   \a
  \a
 \a
";
}