From 4c0dc60ce685b87e54be762a1b51e578a9ed7fa0 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Wed, 4 Feb 2026 10:47:58 +0800 Subject: [PATCH] =?UTF-8?q?style(loading):=20=E5=B0=86=E7=86=8A=E7=8C=AB?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E6=9B=BF=E6=8D=A2=E4=B8=BA?= =?UTF-8?q?=E6=98=9F=E7=90=83=E4=B8=BB=E9=A2=98=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 更新加载页面的CSS和HTML结构，使用新的星球旋转动画替代原有熊猫动画，提升视觉新鲜感并保持加载功能不变。 --- apps/web-antd/loading.html | 400 +++++++++++++++++++------------------ 1 file changed, 201 insertions(+), 199 deletions(-) diff --git a/apps/web-antd/loading.html b/apps/web-antd/loading.html index 7d7b432c..4d564a74 100644 --- a/apps/web-antd/loading.html +++ b/apps/web-antd/loading.html @@ -49,236 +49,238 @@ } /** 下面是自定义 **/ - /* From Uiverse.io by Danishrehman786 */ - .panda-container { + /* From Uiverse.io by Admin12121 */ + .content { + width: 300px; + height: 300px; position: relative; - width: 290px; - height: 250px; - perspective: 1000px; + display: flex; + justify-content: center; + align-items: center; } - .panda-head { + .content .planet { + width: 65%; + height: 65%; + background-color: #546c8c; + border-radius: 100%; position: absolute; - width: 200px; - height: 180px; - background: white; - border: 4px solid #222; - border-radius: 50%; - top: 50px; - left: 50px; - z-index: 4; - box-shadow: - 0 3px 10px rgba(0, 0, 0, 0.1), - inset 0 -5px 20px rgba(0, 0, 0, 0.05); + display: flex; + align-items: center; + transform-origin: center center; + box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1); + animation: planet 5s ease infinite alternate; + /* planet ring */ + /* to cover the back of the ring */ + /* planet spots */ } - .ear { - position: absolute; - width: 70px; - height: 70px; - background: #222; - border: 4px solid #222; - border-radius: 50%; - z-index: 3; - box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3); - } - - .ear-left { - top: 30px; - left: 40px; - transform: rotate(-15deg); - animation: ear-twitch-left 3s ease-in-out infinite; - } - - .ear-right { - top: 30px; - left: 190px; - transform: rotate(15deg); - animation: ear-twitch-right 3.5s ease-in-out infinite; - } - - .eye-patch { - position: absolute; - width: 60px; - height: 70px; - background: #222; - border-radius: 50%; - z-index: 5; - } - - .eye-patch-left { - top: 60px; - left: 30px; - } - - .eye-patch-right { - top: 60px; - left: 110px; - } - - .eye { - position: absolute; - width: 25px; - height: 30px; - background: white; - border-radius: 50%; - z-index: 6; - animation: blink 4s linear infinite; - } - - .eye-left { - top: 75px; - left: 45px; - } - - .eye-right { - top: 75px; - left: 125px; - } - - .pupil { - position: absolute; - width: 12px; - height: 12px; - background: #222; - border-radius: 50%; - z-index: 7; - animation: look-around 8s ease-in-out infinite; - } - - .pupil-left { - top: 82px; - left: 53px; - } - - .pupil-right { - top: 82px; - left: 133px; - } - - .nose { - position: absolute; - width: 30px; - height: 25px; - background: #222; - border-radius: 50%; - top: 110px; - left: 85px; - z-index: 8; - box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3); - } - - .mouth { - position: absolute; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-top: 12px solid #222; - border-radius: 50%; - top: 135px; - left: 92px; - z-index: 7; - transform: rotate(180deg); - animation: smile 5s ease-in-out infinite; - } - - @keyframes wave { - - 0%, - 100% { - transform: rotate(-20deg); - } - - 50% { + @keyframes planet { + 0% { transform: rotate(10deg); } - } - @keyframes blink { - - 0%, - 45%, - 55%, 100% { - height: 30px; - } - - 48%, - 52% { - height: 5px; + transform: rotate(-10deg); } } - @keyframes look-around { + .content .planet .ring { + position: absolute; + width: 300px; + height: 300px; + border-radius: 100%; + background-color: #bacbd9; + display: flex; + align-items: center; + justify-content: center; + transform-origin: 33% center; + box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1); + animation: ring 3s ease infinite; + /* small ball */ + /* inner ring */ + } + + @keyframes ring { + 0% { + transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px); + } - 0%, 100% { - transform: translate(0, 0); + transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px); + } + } + + .content .planet .ring:before { + content: ""; + position: absolute; + width: 10px; + height: 30px; + border-radius: 100%; + background-color: #7ea1bf; + z-index: 2; + left: calc(0px - 5px); + box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2); + } + + .content .planet .ring:after { + content: ""; + position: absolute; + width: 240px; + height: 240px; + border-radius: 100%; + background-color: #7ea1bf; + box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1); + } + + .content .planet .cover-ring { + position: absolute; + width: 100%; + height: 50%; + border-bottom-left-radius: 80%; + border-bottom-right-radius: 80%; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + transform: translate(0px, -17px); + background-color: #546c8c; + z-index: 2; + box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1); + } + + .content .planet .spots { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + z-index: 2; + } + + .content .planet .spots span { + width: 30px; + height: 30px; + background-color: #3c4359; + position: absolute; + border-radius: 100%; + box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3); + animation: dots 5s ease infinite alternate; + } + + @keyframes dots { + 0% { + box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3); + } + + 100% { + box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3); + } + } + + .content .planet .spots span:nth-child(1) { + top: 20px; + right: 50px; + } + + .content .planet .spots span:nth-child(2) { + top: 40px; + left: 50px; + width: 15px; + height: 15px; + } + + .content .planet .spots span:nth-child(3) { + top: 80px; + left: 20px; + width: 25px; + height: 25px; + } + + .content .planet .spots span:nth-child(4) { + top: 80px; + left: 90px; + width: 40px; + height: 40px; + } + + .content .planet .spots span:nth-child(5) { + top: 160px; + left: 70px; + width: 15px; + height: 15px; + } + + .content .planet .spots span:nth-child(6) { + top: 165px; + left: 125px; + width: 10px; + height: 10px; + } + + .content .planet .spots span:nth-child(7) { + top: 90px; + left: 150px; + width: 15px; + height: 15px; + } + + .content p { + color: #bacbd9; + font-size: 14px; + z-index: 2; + position: absolute; + bottom: -20px; + font-family: "Roboto Mono", monospace; + animation: text 4s ease infinite; + width: 100px; + text-align: center; + } + + @keyframes text { + 0% { + transform: translateX(-30px); + letter-spacing: 0px; + color: #bacbd9; } 25% { - transform: translate(3px, 3px); + letter-spacing: 3px; + color: #7ea1bf; } 50% { - transform: translate(0, -3px); + transform: translateX(30px); + letter-spacing: 0px; + color: #bacbd9; } 75% { - transform: translate(-3px, 2px); + letter-spacing: 3px; + color: #7ea1bf; } - } - @keyframes smile { - - 0%, 100% { - transform: rotate(180deg) scale(1); - } - - 50% { - transform: rotate(180deg) scale(1.2); - } - } - - @keyframes ear-twitch-left { - - 0%, - 100% { - transform: rotate(-15deg); - } - - 50% { - transform: rotate(-25deg); - } - } - - @keyframes ear-twitch-right { - - 0%, - 100% { - transform: rotate(15deg); - } - - 50% { - transform: rotate(25deg); + transform: translateX(-30px); + letter-spacing: 0px; + color: #bacbd9; } }
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ + + + + + + + +