为加载动画和SVG图标添加新动画效果

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>
+</html>

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);
   }
-}
+}
+
+/* 添加logo脉冲效果动画 */
+@keyframes pulse-scale {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

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')
+        animateAndRemoveLoader()
-        // 将background属性从html的style中移除
-        document.documentElement.style.removeProperty('background')
-        // 显示页面
-        show.value = true
       }, 1500)
     })
   })