diff options
| -rw-r--r-- | makima/frontend/public/index.html | 121 |
1 files changed, 115 insertions, 6 deletions
diff --git a/makima/frontend/public/index.html b/makima/frontend/public/index.html index 70760d9..83544a1 100644 --- a/makima/frontend/public/index.html +++ b/makima/frontend/public/index.html @@ -347,6 +347,26 @@ overflow: hidden; z-index: 1; } + .scan-sweep { + position: absolute; + inset: 10%; + border-radius: 50%; + background: radial-gradient( + circle, + rgba(117, 170, 252, 0.4) 0%, + rgba(117, 170, 252, 0.2) 38%, + rgba(15, 60, 120, 0.1) 64%, + transparent 85% + ); + opacity: 0; + mix-blend-mode: screen; + filter: blur(0.8px); + z-index: 1; + transform: scale(0.65); + } + .scan-sweep.sweep-2 { + animation-delay: 1.2s; + } .logo-shell::before { content: ""; position: absolute; @@ -370,21 +390,45 @@ mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%); opacity: 0.7; } + .logo-shell:hover .scan-sweep { + opacity: 0.7; + animation: sweep-out 2.4s ease-out infinite; + } .logo-svg { width: 160px; height: 160px; z-index: 2; transition: filter 0.4s ease; } - .logo-svg circle { - transition: opacity 0.4s ease; + .logo-svg .ring { + fill: none; + stroke: #0f3c78; + stroke-dasharray: 400 0; + stroke-linecap: butt; + transition: stroke 0.35s ease, opacity 0.35s ease; + } + .logo-svg .core { + fill: #0f3c78; } .logo-shell:hover .logo-svg { filter: drop-shadow(0 0 14px rgba(15, 60, 120, 0.45)); } + .logo-shell:hover .ring-outer { + animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; + animation-delay: 0.7s; + } + .logo-shell:hover .ring-middle { + animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; + animation-delay: 0.35s; + } + .logo-shell:hover .ring-inner { + animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite; + animation-delay: 0s; + } .logo-shell:hover::before { opacity: 1; transform: scale(1.08); + animation: glow-pulse 1.6s ease-in-out infinite; } .halo { position: absolute; @@ -420,6 +464,69 @@ transform: rotate(360deg); } } + @keyframes glow-pulse { + 0% { + opacity: 0.4; + transform: scale(1.02); + } + 50% { + opacity: 1; + transform: scale(1.12); + } + 100% { + opacity: 0.4; + transform: scale(1.02); + } + } + @keyframes ring-scan { + 0% { + stroke: #0f3c78; + opacity: 0.9; + stroke-dasharray: 400 0; + stroke-linecap: butt; + } + 25% { + stroke: #6fa0ff; + opacity: 1; + stroke-dasharray: 18 14; + stroke-linecap: round; + } + 55% { + stroke: #1e4c94; + opacity: 0.88; + stroke-dasharray: 10 18; + } + 70% { + stroke: #0f3c78; + opacity: 0.9; + stroke-dasharray: 6 22; + } + 90% { + stroke: #aac6ff; + opacity: 0.82; + stroke-dasharray: 4 26; + } + 100% { + stroke: #0f3c78; + opacity: 0.9; + stroke-dasharray: 400 0; + stroke-linecap: butt; + } + } + @keyframes sweep-out { + 0% { + opacity: 0.45; + transform: scale(0.55); + } + 40% { + opacity: 0.7; + transform: scale(1.0); + } + 100% { + opacity: 0; + transform: scale(1.35); + } + } .notice-panel { border: 1px solid #b3c8e8; background: #fdfdff; @@ -619,6 +726,8 @@ </div> <div class="hero-logo"> <div class="logo-shell" aria-hidden="true"> + <span class="scan-sweep"></span> + <span class="scan-sweep sweep-2"></span> <svg class="logo-svg" viewBox="0 0 120 120" @@ -626,10 +735,10 @@ role="img" focusable="false" > - <circle cx="60" cy="60" r="52" fill="none" stroke="#0f3c78" stroke-width="4" /> - <circle cx="60" cy="60" r="36" fill="none" stroke="#0f3c78" stroke-width="3" /> - <circle cx="60" cy="60" r="22" fill="none" stroke="#0f3c78" stroke-width="3" /> - <circle cx="60" cy="60" r="8" fill="#0f3c78" /> + <circle class="ring ring-outer" cx="60" cy="60" r="52" stroke-width="4" /> + <circle class="ring ring-middle" cx="60" cy="60" r="36" stroke-width="3" /> + <circle class="ring ring-inner" cx="60" cy="60" r="22" stroke-width="3" /> + <circle class="core" cx="60" cy="60" r="8" /> </svg> </div> <div class="halo" aria-hidden="true"></div> |