diff --git a/index.html b/index.html index 6a949ec..35dcb15 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@ div.banner br { display: block; } - pre.banner.anime { + pre.banner { position: relative; margin-left: -100px; animation-name: slide; @@ -56,16 +56,126 @@ animation-timing-function: linear; animation-direction: normal; } + pre.banner.pause { + animation-play-state: paused; + } pre.banner.reverse { animation-direction: reverse; } - pre[class~="un"] { + pre.banner.t0_5 { + animation-duration: 0.5s; + } + pre.banner.t1_0 { animation-duration: 1s; } + pre.banner.t1_5 { + animation-duration: 1.5s; + } @keyframes slide { from {left:0;} to {left:2.4em;} } + + + .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;} + } + @@ -128,30 +238,190 @@ •• • • -
-                •
-         ••     •
-         • •     •
-          •••••••••
-            • •  ••
-            •   • •
-      ••••• •  •   •
-     •     • ••    •
-    •       •
-•   •       ••
-•    •      • •
- •   ••    •
-  •••  ••••
-
-