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

use grid instead of flex for mouses animations

Browse Source
This commit is contained in:
asus
2023-11-03 12:00:10 +01:00
parent 50c90cae41
commit d53e21b3be
2 changed files with 120 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
index.html
View File

@@ -23,118 +23,117 @@
</pre> </pre>
<div class="mouse_container"> <div class="mouse_container">
<pre class="mouse f1"> <pre class="mouse f1">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f2"> <pre class="mouse f2">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f3"> <pre class="mouse f3">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • •
•• • •• •• • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f4"> <pre class="mouse f4">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f5"> <pre class="mouse f5">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f6"> <pre class="mouse f6">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f7"> <pre class="mouse f7">
• •
• •
•• • •• •
• • • • • •
••••••••• •••••••••
• • •• • • ••
• • • • • •
••••• • • • ••••• • • •
• • •• • • • •• •
• • • • • •
• • •• • • ••
• • • • • • • •
• •• • • •• •
••• •••• ••• ••••
</pre> </pre>
<pre class="mouse f8"> <pre class="mouse f8">
•• ••
@@ -179,7 +178,6 @@
• •• • • • •• • •
••• •••• ••• ••••
</pre> </pre>
</div> </div>
<!-- <!--
• - • -

36
style.css
View File

@@ -1,4 +1,6 @@
body { body {
/*
*/
overflow-x: hidden; overflow-x: hidden;
} }
body * { body * {
@@ -68,33 +70,39 @@ pre.banner.t1_5 {
} }
.mouse_container { .mouse_container {
position: relative; display: grid;
margin-left: 0px;
display: contents;
/*
border: 1px solid red;
margin-right: auto;
height: 8.5em;
width: 11.9em;
*/
width: fit-content; width: fit-content;
margin-left: 0px;
/*
border: 1px solid blue;
*/
} }
pre.mouse { pre.mouse {
--tmouse: 2s; position: relative;
position: absolute; grid-column: 1;
left: 0px; grid-row: 1;
bottom: 0px; margin: auto auto 0px 0px;
margin: 0px; /*
width: fit-content;
height: fit-content;
border: 1px solid red;
*/
opacity: 0; opacity: 0;
--tmouse: 2s;
animation-name: mouse; animation-name: mouse;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-duration: var(--tmouse); animation-duration: var(--tmouse);
animation-timing-function: linear; animation-timing-function: linear;
animation-direction: normal; animation-direction: normal;
} }
/*
pre.mouse:first-child { pre.mouse:first-child {
position: relative; position: relative;
} }
*/
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);} pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);} pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}