hy/chatapp-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update loading eagle animation

Browse Source
This commit is contained in:
170-carry 2026-04-28 20:41:30 +08:00
parent a6034bf9c0
commit 04ec78840a
3 changed files with 68 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
h5/hyapp/host-center/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>Host Center</title> <title>Host Center</title>
<link rel="stylesheet" href="./style.css?v=20260428-2040" /> <link rel="stylesheet" href="./style.css?v=20260428-2045" />
</head> </head>
<body> <body>
<div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading"> <div class="host-center" aria-label="Host Center" data-i18n-aria="page_label" data-loading="true" data-view="loading">
@ -126,18 +126,24 @@
<div class="home-indicator" aria-hidden="true"></div> <div class="home-indicator" aria-hidden="true"></div>
<div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true"> <div class="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
<div class="runner-stick" aria-hidden="true"> <div class="loading-eagle" aria-hidden="true">
<span class="runner-head"></span> <svg class="eagle-svg" viewBox="0 0 176 110" focusable="false">
<span class="runner-body"></span> <ellipse class="eagle-shadow" cx="88" cy="96" rx="42" ry="5"></ellipse>
<span class="runner-arm runner-arm-front"></span> <g class="eagle-fly">
<span class="runner-arm runner-arm-back"></span> <path class="eagle-wing eagle-wing-left" d="M82 50C63 26 31 12 9 21c19 10 35 22 48 38-17-5-34-3-49 8 31 13 56 10 78-2Z"></path>
<span class="runner-leg runner-leg-front"></span> <path class="eagle-wing eagle-wing-right" d="M94 50c19-24 51-38 73-29-19 10-35 22-48 38 17-5 34-3 49 8-31 13-56 10-78-2Z"></path>
<span class="runner-leg runner-leg-back"></span> <path class="eagle-tail" d="M78 62 63 78l22-6 3 20 3-20 22 6-15-16Z"></path>
<span class="runner-ground"></span> <path class="eagle-body" d="M65 53c9-17 37-17 46 0 8 16-3 29-23 29S57 69 65 53Z"></path>
<path class="eagle-chest" d="M76 58c5 8 19 8 24 0 0 10-4 17-12 17s-12-7-12-17Z"></path>
<circle class="eagle-head" cx="88" cy="38" r="14"></circle>
<path class="eagle-beak" d="M100 39h16l-15 8Z"></path>
<circle class="eagle-eye" cx="94" cy="35" r="2"></circle>
</g>
</svg>
</div> </div>
<div class="loading-copy">loading....</div> <div class="loading-copy">loading....</div>
</div> </div>
</div> </div>
<script src="./script.js?v=20260428-2040" defer></script> <script src="./script.js?v=20260428-2045" defer></script>
</body> </body>
</html> </html>

2
h5/hyapp/host-center/script.js
View File

@ -214,7 +214,7 @@
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang]; if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
try { try {
const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2040`, { cache: "no-store" }); const response = await fetch(`./locales/${normalizedLang}.json?v=20260428-2045`, { cache: "no-store" });
if (response.ok) return await response.json(); if (response.ok) return await response.json();
} catch (error) { } catch (error) {
return fallbackMessages[normalizedLang]; return fallbackMessages[normalizedLang];

157
h5/hyapp/host-center/style.css
View File

@ -81,103 +81,65 @@ a {
display: none; display: none;
} }
.runner-stick { .loading-eagle {
position: relative; width: 158px;
width: 92px; height: 106px;
height: 82px;
color: #1ecf70; color: #1ecf70;
filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22)); filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24));
animation: runner-bob 0.42s ease-in-out infinite; animation: eagle-glide 1s ease-in-out infinite;
} }
.runner-head, .eagle-svg {
.runner-body,
.runner-arm,
.runner-leg,
.runner-ground {
position: absolute;
display: block; display: block;
width: 100%;
height: 100%;
overflow: visible;
} }
.runner-head { .eagle-shadow {
top: 5px; fill: rgba(30, 207, 112, 0.16);
left: 39px; animation: eagle-shadow 1s ease-in-out infinite;
width: 18px;
height: 18px;
border: 4px solid currentColor;
border-radius: 50%;
} }
.runner-body { .eagle-fly {
top: 26px; transform-origin: 88px 57px;
left: 47px; animation: eagle-fly 0.58s ease-in-out infinite;
width: 5px;
height: 28px;
border-radius: 999px;
background: currentColor;
transform-origin: 50% 3px;
animation: runner-body 0.42s ease-in-out infinite;
} }
.runner-arm, .eagle-wing {
.runner-leg { fill: currentColor;
left: 47px; transform-box: fill-box;
width: 5px;
border-radius: 999px;
background: currentColor;
transform-origin: 50% 2px;
} }
.runner-arm { .eagle-wing-left {
top: 31px; transform-origin: 92% 62%;
height: 27px; animation: eagle-wing-left 0.58s ease-in-out infinite;
} }
.runner-arm-front { .eagle-wing-right {
animation: runner-arm-front 0.42s ease-in-out infinite; transform-origin: 8% 62%;
animation: eagle-wing-right 0.58s ease-in-out infinite;
} }
.runner-arm-back { .eagle-tail {
animation: runner-arm-back 0.42s ease-in-out infinite; fill: #18b85f;
} }
.runner-leg { .eagle-body,
top: 51px; .eagle-head {
height: 33px; fill: #22cf72;
} }
.runner-leg-front { .eagle-chest {
animation: runner-leg-front 0.42s ease-in-out infinite; fill: #baf8d4;
} }
.runner-leg-back { .eagle-beak {
animation: runner-leg-back 0.42s ease-in-out infinite; fill: #128f50;
} }
.runner-ground { .eagle-eye {
right: 6px; fill: #07502a;
bottom: 2px;
width: 70px;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(30, 207, 112, 0.18);
}
.runner-ground::before,
.runner-ground::after {
content: "";
position: absolute;
top: 0;
width: 24px;
height: 4px;
border-radius: 999px;
background: currentColor;
animation: runner-ground 0.6s linear infinite;
}
.runner-ground::after {
animation-delay: 0.3s;
} }
.loading-copy { .loading-copy {
@ -759,72 +721,55 @@ a {
font-size: 24px; font-size: 24px;
} }
@keyframes runner-bob { @keyframes eagle-glide {
0%, 0%,
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-5px); transform: translateY(-7px);
} }
} }
@keyframes runner-body { @keyframes eagle-fly {
0%, 0%,
100% { 100% {
transform: rotate(-7deg); transform: translateX(-3px) rotate(-2deg);
} }
50% { 50% {
transform: rotate(7deg); transform: translateX(3px) rotate(2deg);
} }
} }
@keyframes runner-arm-front { @keyframes eagle-wing-left {
0%, 0%,
100% { 100% {
transform: rotate(62deg); transform: rotate(12deg) translateY(0);
} }
50% { 50% {
transform: rotate(-58deg); transform: rotate(-22deg) translateY(9px);
} }
} }
@keyframes runner-arm-back { @keyframes eagle-wing-right {
0%, 0%,
100% { 100% {
transform: rotate(-58deg); transform: rotate(-12deg) translateY(0);
} }
50% { 50% {
transform: rotate(62deg); transform: rotate(22deg) translateY(9px);
} }
} }
@keyframes runner-leg-front { @keyframes eagle-shadow {
0%, 0%,
100% { 100% {
transform: rotate(-58deg); opacity: 0.45;
transform: scaleX(0.82);
} }
50% { 50% {
transform: rotate(54deg); opacity: 0.75;
} transform: scaleX(1);
}
@keyframes runner-leg-back {
0%,
100% {
transform: rotate(54deg);
}
50% {
transform: rotate(-58deg);
}
}
@keyframes runner-ground {
0% {
transform: translateX(78px);
}
100% {
transform: translateX(-30px);
} }
} }