-
-
+
+
+
+
+
+
+
+
loading....
diff --git a/h5/hyapp/host-center/style.css b/h5/hyapp/host-center/style.css
index 23e6310..2024ea3 100644
--- a/h5/hyapp/host-center/style.css
+++ b/h5/hyapp/host-center/style.css
@@ -81,81 +81,103 @@ a {
display: none;
}
-.loading-eagle {
+.runner-stick {
position: relative;
- width: 196px;
- height: 132px;
- animation: eagle-glide 1s ease-in-out infinite;
+ width: 92px;
+ height: 82px;
+ color: #1ecf70;
+ filter: drop-shadow(0 8px 14px rgba(30, 207, 112, 0.22));
+ animation: runner-bob 0.42s ease-in-out infinite;
}
-.stick-eagle-svg {
+.runner-head,
+.runner-body,
+.runner-arm,
+.runner-leg,
+.runner-ground {
+ position: absolute;
display: block;
- width: 100%;
- height: 100%;
- overflow: visible;
- filter: drop-shadow(0 12px 18px rgba(20, 176, 96, 0.2));
}
-.stick-eagle-shadow {
- fill: rgba(20, 176, 96, 0.16);
- transform-origin: 110px 128px;
- animation: stick-eagle-shadow 1s ease-in-out infinite;
+.runner-head {
+ top: 5px;
+ left: 39px;
+ width: 18px;
+ height: 18px;
+ border: 4px solid currentColor;
+ border-radius: 50%;
}
-.stick-eagle-flight {
- transform-origin: 110px 76px;
- animation: stick-eagle-flight 0.66s 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;
}
-.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;
+.runner-arm,
+.runner-leg {
+ left: 47px;
+ width: 5px;
+ border-radius: 999px;
+ background: currentColor;
+ transform-origin: 50% 2px;
}
-.stick-eagle-wing,
-.stick-eagle-feather {
- transform-box: fill-box;
+.runner-arm {
+ top: 31px;
+ height: 27px;
}
-.stick-eagle-wing-left,
-.stick-eagle-feather-left {
- transform-origin: 94% 70%;
- animation: stick-eagle-left-wing 0.66s ease-in-out infinite;
+.runner-arm-front {
+ animation: runner-arm-front 0.42s 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;
+.runner-arm-back {
+ animation: runner-arm-back 0.42s ease-in-out infinite;
}
-.stick-eagle-feather {
- opacity: 0.55;
- stroke-width: 4;
+.runner-leg {
+ top: 51px;
+ height: 33px;
}
-.stick-eagle-body,
-.stick-eagle-head {
- stroke-width: 5.5;
+.runner-leg-front {
+ animation: runner-leg-front 0.42s ease-in-out infinite;
}
-.stick-eagle-chest,
-.stick-eagle-tail,
-.stick-eagle-beak {
- stroke-width: 5;
+.runner-leg-back {
+ animation: runner-leg-back 0.42s ease-in-out infinite;
}
-.stick-eagle-eye {
- fill: #08723f;
+.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;
}
.loading-copy {
@@ -737,55 +759,72 @@ a {
font-size: 24px;
}
-@keyframes eagle-glide {
+@keyframes runner-bob {
0%,
100% {
transform: translateY(0);
}
50% {
- transform: translateY(-7px);
+ transform: translateY(-5px);
}
}
-@keyframes stick-eagle-flight {
+@keyframes runner-body {
0%,
100% {
- transform: translateY(0) rotate(-1deg);
+ transform: rotate(-7deg);
}
50% {
- transform: translateY(3px) rotate(1deg);
+ transform: rotate(7deg);
}
}
-@keyframes stick-eagle-left-wing {
+@keyframes runner-arm-front {
0%,
100% {
- transform: rotate(-4deg) translateY(0);
+ transform: rotate(62deg);
}
50% {
- transform: rotate(16deg) translateY(10px);
+ transform: rotate(-58deg);
}
}
-@keyframes stick-eagle-right-wing {
+@keyframes runner-arm-back {
0%,
100% {
- transform: rotate(4deg) translateY(0);
+ transform: rotate(-58deg);
}
50% {
- transform: rotate(-16deg) translateY(10px);
+ transform: rotate(62deg);
}
}
-@keyframes stick-eagle-shadow {
+@keyframes runner-leg-front {
0%,
100% {
- opacity: 0.45;
- transform: scaleX(0.82);
+ transform: rotate(-58deg);
}
50% {
- opacity: 0.75;
- transform: scaleX(1);
+ 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);
}
}