From 712623806a3db009ed2fa462874cbd2d7f9f20b8 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 23 Apr 2025 08:07:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=92=8CSVG=E5=9B=BE=E6=A0=87=E6=B7=BB=E5=8A=A0=E6=96=B0?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        | 67 ++++++++++++++++++++++++++++++++++++++++++++++-
 public/loader.css | 36 ++++++++++++++++++++++++-
 src/App.vue       | 32 +++++++++++++++++-----
 3 files changed, 127 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 15a7a159..dda0172f 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,71 @@
       <!-- Logo -->
       <svg width="160px" height="160px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
         style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
+        <style>
+          /* 添加SVG内部的动画样式 */
+          @keyframes float {
+
+            0%,
+            100% {
+              transform: translateY(0);
+            }
+
+            50% {
+              transform: translateY(-5px);
+            }
+          }
+
+          @keyframes pulse {
+
+            0%,
+            100% {
+              opacity: 0.8;
+            }
+
+            50% {
+              opacity: 1;
+            }
+          }
+
+          @keyframes glow {
+
+            0%,
+            100% {
+              filter: drop-shadow(0 0 3px rgba(141, 81, 249, 0.3));
+            }
+
+            50% {
+              filter: drop-shadow(0 0 6px rgba(141, 81, 249, 0.6));
+            }
+          }
+
+          /* 为各个元素添加动画 */
+          #a2-c {
+            filter: drop-shadow(0 0 5px rgba(141, 81, 249, 0.3));
+            animation: glow 3s ease-in-out infinite;
+          }
+
+          path {
+            animation: pulse 2s ease-in-out infinite;
+          }
+
+          /* 错开不同元素的动画开始时间 */
+          g:nth-child(2) path {
+            animation-delay: 0.3s;
+          }
+
+          g:nth-child(3) path {
+            animation-delay: 0.6s;
+          }
+
+          g:nth-child(4) path {
+            animation-delay: 0.9s;
+          }
+
+          g:nth-child(5) path {
+            animation-delay: 1.2s;
+          }
+        </style>
         <g transform="matrix(1,0,0,1,-2606,-236)">
           <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
             <rect x="0" y="0" width="192" height="192" style="fill: none" />
@@ -158,4 +223,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/loader.css b/public/loader.css
index 5f79652e..5f777cf6 100644
--- a/public/loader.css
+++ b/public/loader.css
@@ -5,12 +5,25 @@
   background: var(--initial-loader-bg, #fff);
   block-size: 100vh;
   inline-size: 100vw;
+  transition: opacity 0.8s ease;
 }
 
 .loading-logo {
   position: absolute;
   inset-block-start: 35%;
   inset-inline-start: calc(50% - 5rem);
+  transition: transform 0.8s ease, opacity 0.8s ease;
+}
+
+/* 添加logo完成动画 */
+.loading-complete .loading-logo {
+  opacity: 0;
+  transform: scale(1.2) rotate(360deg);
+}
+
+/* 添加加载背景消失动画 */
+.loading-complete {
+  opacity: 0;
 }
 
 .loading {
@@ -22,6 +35,12 @@
   inline-size: 55px;
   inset-block-start: 80%;
   inset-inline-start: calc(50% - 27.5px);
+  transition: opacity 0.6s ease;
+}
+
+/* 完成时隐藏加载动画 */
+.loading-complete .loading {
+  opacity: 0;
 }
 
 .loading .effect-1,
@@ -72,4 +91,19 @@
     opacity: 1;
     transform: rotate(1turn);
   }
-}
\ No newline at end of file
+}
+
+/* 添加logo脉冲效果动画 */
+@keyframes pulse-scale {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index 9688549a..6ee10b2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -122,6 +122,24 @@ if (window.Apex) {
   }
 }
 
+// 添加logo动画效果并延迟移除加载界面
+function animateAndRemoveLoader() {
+  const loadingBg = document.querySelector('#loading-bg') as HTMLElement
+  if (loadingBg) {
+    // 先添加完成动画类
+    loadingBg.classList.add('loading-complete')
+
+    // 等待动画完成后再移除元素
+    setTimeout(() => {
+      removeEl('#loading-bg')
+      // 将background属性从html的style中移除
+      document.documentElement.style.removeProperty('background')
+      // 显示页面
+      show.value = true
+    }, 800) // 与CSS动画持续时间匹配
+  }
+}
+
 onMounted(() => {
   // 初始化data-theme属性
   updateHtmlThemeAttribute(globalTheme.name.value)
@@ -131,13 +149,15 @@ onMounted(() => {
 
   ensureRenderComplete(() => {
     nextTick(() => {
+      // 添加logo脉冲动画
+      const loadingLogo = document.querySelector('.loading-logo svg') as SVGElement
+      if (loadingLogo) {
+        loadingLogo.style.animation = 'pulse-scale 1.5s ease infinite'
+      }
+
       setTimeout(() => {
-        // 移除加载动画
-        removeEl('#loading-bg')
-        // 将background属性从html的style中移除
-        document.documentElement.style.removeProperty('background')
-        // 显示页面
-        show.value = true
+        // 移除加载动画（使用新的动画方法）
+        animateAndRemoveLoader()
       }, 1500)
     })
   })