261 lines
9.3 KiB
HTML
261 lines
9.3 KiB
HTML
|
|
<div class="mouse_frame">
|
|
<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">
|
|
••
|
|
• • •
|
|
•• •
|
|
• • •
|
|
• • • •
|
|
••••• • ••
|
|
• • •••••••••
|
|
• • •
|
|
•• • ••• •
|
|
• • • •
|
|
• •• • •
|
|
••• ••••
|
|
</pre>
|
|
<pre class="mouse f9">
|
|
••
|
|
• • •
|
|
•• •
|
|
• • •
|
|
• • • •
|
|
••••• • ••
|
|
• • •••••••••
|
|
• • • •
|
|
• • ••• •
|
|
• • • •
|
|
• •• • •
|
|
••• ••••
|
|
</pre>
|
|
<pre class="mouse f10">
|
|
|
|
••
|
|
• • •
|
|
•• •
|
|
• • •
|
|
• • • •
|
|
••••• • ••
|
|
• • •••••••••
|
|
• • • •
|
|
• • ••• •
|
|
• • • •
|
|
• •• • •
|
|
••• ••••
|
|
</pre>
|
|
</div>
|
|
|
|
<style>
|
|
.mouse_frame {
|
|
position: relative;
|
|
margin-left: 0px;
|
|
/*
|
|
border: 1px solid red;
|
|
margin-right: auto;
|
|
height: 8.5em;
|
|
width: 11.9em;
|
|
*/
|
|
width: fit-content;
|
|
}
|
|
pre.mouse {
|
|
--tmouse: 2s;
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
margin: 0px;
|
|
opacity: 0;
|
|
animation-name: mouse;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tmouse);
|
|
animation-timing-function: linear;
|
|
animation-direction: normal;
|
|
}
|
|
pre.mouse:first-child {
|
|
position: relative;
|
|
}
|
|
/* *27
|
|
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 3.7/100);}
|
|
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 7.4/100);}
|
|
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 11.1/100);}
|
|
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 14.8/100);}
|
|
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 18.5/100);}
|
|
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 22.2/100);}
|
|
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 25.9/100);}
|
|
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 29.6/100);}
|
|
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 33.3/100);}
|
|
pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 37/100);}
|
|
pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 40.7/100);}
|
|
pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 44.4/100);}
|
|
pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 48.1/100);}
|
|
pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 51.8/100);}
|
|
pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 55.5/100);}
|
|
pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 59.2/100);}
|
|
pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 62.9/100);}
|
|
pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 66.6/100);}
|
|
pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 70.3/100);}
|
|
pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 74/100);}
|
|
pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 77.7/100);}
|
|
pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 81.4/100);}
|
|
pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 85.1/100);}
|
|
pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 88.8/100);}
|
|
pre.mouse.f26 {animation-delay: calc(var(--tmouse) * 92.5/100);}
|
|
pre.mouse.f27 {animation-delay: calc(var(--tmouse) * 96.2/100);}
|
|
*/
|
|
/* *25
|
|
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 4/100);}
|
|
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 8/100);}
|
|
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 12/100);}
|
|
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 16/100);}
|
|
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 20/100);}
|
|
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 24/100);}
|
|
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 28/100);}
|
|
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 32/100);}
|
|
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 36/100);}
|
|
pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 40/100);}
|
|
pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 44/100);}
|
|
pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 48/100);}
|
|
pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 52/100);}
|
|
pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 56/100);}
|
|
pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 60/100);}
|
|
pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 64/100);}
|
|
pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 68/100);}
|
|
pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 72/100);}
|
|
pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 76/100);}
|
|
pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 80/100);}
|
|
pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 84/100);}
|
|
pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 88/100);}
|
|
pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 92/100);}
|
|
pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 96/100);}
|
|
*/
|
|
/* *10
|
|
*/
|
|
pre.mouse.f2 {animation-delay: calc(var(--tmouse) * 10/100);}
|
|
pre.mouse.f3 {animation-delay: calc(var(--tmouse) * 20/100);}
|
|
pre.mouse.f4 {animation-delay: calc(var(--tmouse) * 30/100);}
|
|
pre.mouse.f5 {animation-delay: calc(var(--tmouse) * 40/100);}
|
|
pre.mouse.f6 {animation-delay: calc(var(--tmouse) * 50/100);}
|
|
pre.mouse.f7 {animation-delay: calc(var(--tmouse) * 60/100);}
|
|
pre.mouse.f8 {animation-delay: calc(var(--tmouse) * 70/100);}
|
|
pre.mouse.f9 {animation-delay: calc(var(--tmouse) * 80/100);}
|
|
pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
|
|
@keyframes mouse {
|
|
0% {opacity: 1;}
|
|
10% {opacity: 1;}
|
|
10.1% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
</style>
|
|
|