From 17ef7cb4bba85bf5dc8082cc2958591d813fa31d Mon Sep 17 00:00:00 2001 From: 170-carry Date: Tue, 28 Apr 2026 20:45:30 +0800 Subject: [PATCH] fix: draw stick eagle loading --- h5/hyapp/host-center/index.html | 28 ++++----- h5/hyapp/host-center/script.js | 2 +- h5/hyapp/host-center/style.css | 100 ++++++++++++++++++-------------- 3 files changed, 74 insertions(+), 56 deletions(-) diff --git a/h5/hyapp/host-center/index.html b/h5/hyapp/host-center/index.html index c645472..cbd485d 100644 --- a/h5/hyapp/host-center/index.html +++ b/h5/hyapp/host-center/index.html @@ -4,7 +4,7 @@ Host Center - +
@@ -127,23 +127,25 @@
loading....
- + diff --git a/h5/hyapp/host-center/script.js b/h5/hyapp/host-center/script.js index f1a852e..2dac1d1 100644 --- a/h5/hyapp/host-center/script.js +++ b/h5/hyapp/host-center/script.js @@ -214,7 +214,7 @@ if (window.location.protocol === "file:") return fallbackMessages[normalizedLang]; try { - const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2045`, { cache: "no-store" }); + const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2060`, { cache: "no-store" }); if (response.ok) return await response.json(); } catch (error) { return fallbackMessages[normalizedLang]; diff --git a/h5/hyapp/host-center/style.css b/h5/hyapp/host-center/style.css index c0ea34c..23e6310 100644 --- a/h5/hyapp/host-center/style.css +++ b/h5/hyapp/host-center/style.css @@ -82,64 +82,80 @@ a { } .loading-eagle { - width: 158px; - height: 106px; - color: #1ecf70; - filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24)); + position: relative; + width: 196px; + height: 132px; animation: eagle-glide 1s ease-in-out infinite; } -.eagle-svg { +.stick-eagle-svg { display: block; width: 100%; height: 100%; overflow: visible; + filter: drop-shadow(0 12px 18px rgba(20, 176, 96, 0.2)); } -.eagle-shadow { - fill: rgba(30, 207, 112, 0.16); - animation: eagle-shadow 1s ease-in-out infinite; +.stick-eagle-shadow { + fill: rgba(20, 176, 96, 0.16); + transform-origin: 110px 128px; + animation: stick-eagle-shadow 1s ease-in-out infinite; } -.eagle-fly { - transform-origin: 88px 57px; - animation: eagle-fly 0.58s ease-in-out infinite; +.stick-eagle-flight { + transform-origin: 110px 76px; + animation: stick-eagle-flight 0.66s ease-in-out infinite; } -.eagle-wing { - fill: currentColor; +.stick-eagle-wing, +.stick-eagle-feather, +.stick-eagle-body, +.stick-eagle-chest, +.stick-eagle-tail, +.stick-eagle-head, +.stick-eagle-beak { + fill: none; + stroke: #1ecf70; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 6; +} + +.stick-eagle-wing, +.stick-eagle-feather { transform-box: fill-box; } -.eagle-wing-left { - transform-origin: 92% 62%; - animation: eagle-wing-left 0.58s ease-in-out infinite; +.stick-eagle-wing-left, +.stick-eagle-feather-left { + transform-origin: 94% 70%; + animation: stick-eagle-left-wing 0.66s ease-in-out infinite; } -.eagle-wing-right { - transform-origin: 8% 62%; - animation: eagle-wing-right 0.58s ease-in-out infinite; +.stick-eagle-wing-right, +.stick-eagle-feather-right { + transform-origin: 6% 70%; + animation: stick-eagle-right-wing 0.66s ease-in-out infinite; } -.eagle-tail { - fill: #18b85f; +.stick-eagle-feather { + opacity: 0.55; + stroke-width: 4; } -.eagle-body, -.eagle-head { - fill: #22cf72; +.stick-eagle-body, +.stick-eagle-head { + stroke-width: 5.5; } -.eagle-chest { - fill: #baf8d4; +.stick-eagle-chest, +.stick-eagle-tail, +.stick-eagle-beak { + stroke-width: 5; } -.eagle-beak { - fill: #128f50; -} - -.eagle-eye { - fill: #07502a; +.stick-eagle-eye { + fill: #08723f; } .loading-copy { @@ -731,37 +747,37 @@ a { } } -@keyframes eagle-fly { +@keyframes stick-eagle-flight { 0%, 100% { - transform: translateX(-3px) rotate(-2deg); + transform: translateY(0) rotate(-1deg); } 50% { - transform: translateX(3px) rotate(2deg); + transform: translateY(3px) rotate(1deg); } } -@keyframes eagle-wing-left { +@keyframes stick-eagle-left-wing { 0%, 100% { - transform: rotate(12deg) translateY(0); + transform: rotate(-4deg) translateY(0); } 50% { - transform: rotate(-22deg) translateY(9px); + transform: rotate(16deg) translateY(10px); } } -@keyframes eagle-wing-right { +@keyframes stick-eagle-right-wing { 0%, 100% { - transform: rotate(-12deg) translateY(0); + transform: rotate(4deg) translateY(0); } 50% { - transform: rotate(22deg) translateY(9px); + transform: rotate(-16deg) translateY(10px); } } -@keyframes eagle-shadow { +@keyframes stick-eagle-shadow { 0%, 100% { opacity: 0.45;