perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation mouse in css is working

Browse Source
This commit is contained in:
asus
2024-05-15 15:49:48 +02:00
parent b517d26ece
commit f042247cbb
15 changed files with 374 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
styles/elements/banners.css
View File

@@ -4,7 +4,7 @@
--banner_height: var(--base_banner_height); /*default*/
height: min(26vw, var(--banner_height));
background-image: url(../img/banner_1.svg); /*default*/
background-image: url(../../docs/banners/banner_1.svg); /*default*/
background-size: contain;
background-repeat: repeat;
background-position-x: 0%;
@@ -55,22 +55,22 @@
*
*/
.banner_size_1 {
background-image: url(../img/banner_1.svg);
background-image: url(../../docs/banners/banner_1.svg);
--banner_height: calc(var(--base_banner_height) * 1);
}
.banner_size_2 {
background-image: url(../img/banner_2.svg);
background-image: url(../../docs/banners/banner_2.svg);
--banner_height: calc(var(--base_banner_height) * 2);
}
.banner_size_3 {
background-image: url(../img/banner_3.svg);
background-image: url(../../docs/banners/banner_3.svg);
--banner_height: calc(var(--base_banner_height) * 3);
}
.banner_size_4 {
background-image: url(../img/banner_4.svg);
background-image: url(../../docs/banners/banner_4.svg);
--banner_height: calc(var(--base_banner_height) * 4);
}
.banner_size_5 {
background-image: url(../img/banner_5.svg);
background-image: url(../../docs/banners/banner_5.svg);
--banner_height: calc(var(--base_banner_height) * 5);
}

83
styles/elements/mouses.css
View File

@@ -1,53 +1,48 @@
@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";
.mouse {
position: relative;
margin: 20px 0px;
}
.frames_container {
display: grid;
grid-template-rows: 1fr;
margin: auto;
width: fit-content;
}
pre.frame.hide {
display: none;
}
pre.frame {
position: relative;
justify-items: start;
align-items: end;
grid-column: 1;
grid-row: 1;
overflow: hidden;
opacity: 0;
--tframes: 2s;
animation-name: ascii_frame;
animation-iteration-count: infinite;
animation-duration: var(--tframes);
animation-timing-function: steps(3);
animation-direction: normal;
}
> div {
position: relative;
top: 0%;
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);}
/*
* 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;
@keyframes ascii_frame {
0% {opacity: 1;}
25% {opacity: 1;}
25.1% {opacity: 0;}
100% {opacity: 0;}
}
--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;
}
#mouse_1 {
place-self: center;
> div::after {
position: absolute;
top: 100%;
left: 0px;
}
}
#mouse_2 {
left: 10%;
@keyframes mouse_move {
0% {top: 0%;}
25% {top: -100%;}
50% {top: -200%;}
75% {top: -300%;}
}
#mouse_3 {
left: 60%;
}
#mouse_4 {
left: 20%;
}

72
styles/elements/mouses/mouse_1.css Normal file
View File

@@ -0,0 +1,72 @@
.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
';
}

72
styles/elements/mouses/mouse_2.css Normal file
View File

@@ -0,0 +1,72 @@
.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
';
}

64
styles/elements/mouses/mouse_3.css Normal file
View File

@@ -0,0 +1,64 @@
.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
';
}

64
styles/elements/mouses/mouse_4.css Normal file
View File

@@ -0,0 +1,64 @@
.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
';
}