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

36
style.css
View File

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