fix: update loading eagle animation
This commit is contained in:
170-carry
parent
a6034bf9c0
commit
04ec78840a
@ -4,7 +4,7 @@
|
||||
<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" />
|
||||
<title>Host Center</title>
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2040" />
|
||||
<link rel="stylesheet" href="./style.css?v=20260428-2045" />
|
||||
</head>
|
||||
<body>
|
||||
<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="loading-mask" id="loadingMask" role="status" aria-live="polite" aria-busy="true">
|
||||
<div class="runner-stick" aria-hidden="true">
|
||||
<span class="runner-head"></span>
|
||||
<span class="runner-body"></span>
|
||||
<span class="runner-arm runner-arm-front"></span>
|
||||
<span class="runner-arm runner-arm-back"></span>
|
||||
<span class="runner-leg runner-leg-front"></span>
|
||||
<span class="runner-leg runner-leg-back"></span>
|
||||
<span class="runner-ground"></span>
|
||||
<div class="loading-eagle" aria-hidden="true">
|
||||
<svg class="eagle-svg" viewBox="0 0 176 110" focusable="false">
|
||||
<ellipse class="eagle-shadow" cx="88" cy="96" rx="42" ry="5"></ellipse>
|
||||
<g class="eagle-fly">
|
||||
<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>
|
||||
<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>
|
||||
<path class="eagle-tail" d="M78 62 63 78l22-6 3 20 3-20 22 6-15-16Z"></path>
|
||||
<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 class="loading-copy">loading....</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js?v=20260428-2040" defer></script>
|
||||
<script src="./script.js?v=20260428-2045" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -214,7 +214,7 @@
|
||||
if (window.location.protocol === "file:") return fallbackMessages[normalizedLang];
|
||||
|
||||
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();
|
||||
} catch (error) {
|
||||
return fallbackMessages[normalizedLang];
|
||||
|
||||
@ -81,103 +81,65 @@ a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.runner-stick {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 82px;
|
||||
.loading-eagle {
|
||||
width: 158px;
|
||||
height: 106px;
|
||||
color: #1ecf70;
|
||||
filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22));
|
||||
animation: runner-bob 0.42s ease-in-out infinite;
|
||||
filter: drop-shadow(0 10px 18px rgba(30, 207, 112, 0.24));
|
||||
animation: eagle-glide 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-head,
|
||||
.runner-body,
|
||||
.runner-arm,
|
||||
.runner-leg,
|
||||
.runner-ground {
|
||||
position: absolute;
|
||||
.eagle-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.runner-head {
|
||||
top: 5px;
|
||||
left: 39px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 4px solid currentColor;
|
||||
border-radius: 50%;
|
||||
.eagle-shadow {
|
||||
fill: rgba(30, 207, 112, 0.16);
|
||||
animation: eagle-shadow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-body {
|
||||
top: 26px;
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 3px;
|
||||
animation: runner-body 0.42s ease-in-out infinite;
|
||||
.eagle-fly {
|
||||
transform-origin: 88px 57px;
|
||||
animation: eagle-fly 0.58s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-arm,
|
||||
.runner-leg {
|
||||
left: 47px;
|
||||
width: 5px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
transform-origin: 50% 2px;
|
||||
.eagle-wing {
|
||||
fill: currentColor;
|
||||
transform-box: fill-box;
|
||||
}
|
||||
|
||||
.runner-arm {
|
||||
top: 31px;
|
||||
height: 27px;
|
||||
.eagle-wing-left {
|
||||
transform-origin: 92% 62%;
|
||||
animation: eagle-wing-left 0.58s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-arm-front {
|
||||
animation: runner-arm-front 0.42s ease-in-out infinite;
|
||||
.eagle-wing-right {
|
||||
transform-origin: 8% 62%;
|
||||
animation: eagle-wing-right 0.58s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.runner-arm-back {
|
||||
animation: runner-arm-back 0.42s ease-in-out infinite;
|
||||
.eagle-tail {
|
||||
fill: #18b85f;
|
||||
}
|
||||
|
||||
.runner-leg {
|
||||
top: 51px;
|
||||
height: 33px;
|
||||
.eagle-body,
|
||||
.eagle-head {
|
||||
fill: #22cf72;
|
||||
}
|
||||
|
||||
.runner-leg-front {
|
||||
animation: runner-leg-front 0.42s ease-in-out infinite;
|
||||
.eagle-chest {
|
||||
fill: #baf8d4;
|
||||
}
|
||||
|
||||
.runner-leg-back {
|
||||
animation: runner-leg-back 0.42s ease-in-out infinite;
|
||||
.eagle-beak {
|
||||
fill: #128f50;
|
||||
}
|
||||
|
||||
.runner-ground {
|
||||
right: 6px;
|
||||
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;
|
||||
.eagle-eye {
|
||||
fill: #07502a;
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
@ -759,72 +721,55 @@ a {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@keyframes runner-bob {
|
||||
@keyframes eagle-glide {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-body {
|
||||
@keyframes eagle-fly {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-7deg);
|
||||
transform: translateX(-3px) rotate(-2deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(7deg);
|
||||
transform: translateX(3px) rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-arm-front {
|
||||
@keyframes eagle-wing-left {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(62deg);
|
||||
transform: rotate(12deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-58deg);
|
||||
transform: rotate(-22deg) translateY(9px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-arm-back {
|
||||
@keyframes eagle-wing-right {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-58deg);
|
||||
transform: rotate(-12deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(62deg);
|
||||
transform: rotate(22deg) translateY(9px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-leg-front {
|
||||
@keyframes eagle-shadow {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-58deg);
|
||||
opacity: 0.45;
|
||||
transform: scaleX(0.82);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-leg-back {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(54deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-58deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes runner-ground {
|
||||
0% {
|
||||
transform: translateX(78px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30px);
|
||||
opacity: 0.75;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user