优化加载动画

index.html

@@ -49,18 +49,6 @@
         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%,
@@ -223,4 +211,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
+</html>

public/loader.css

@@ -5,25 +5,28 @@
   background: var(--initial-loader-bg, #fff);
   block-size: 100vh;
   inline-size: 100vw;
-  transition: opacity 0.8s ease;
+  transition: opacity 0.8s ease, transform 0.8s ease, filter 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;
+  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
 }
 
-/* 添加logo完成动画 */
+/* 添加logo完成动画 - 放大虚化效果 */
 .loading-complete .loading-logo {
+  filter: blur(10px);
   opacity: 0;
-  transform: scale(1.2) rotate(360deg);
+  transform: scale(1.5);
 }
 
-/* 添加加载背景消失动画 */
+/* 添加加载背景消失动画 - 放大虚化效果 */
 .loading-complete {
+  filter: blur(15px);
   opacity: 0;
+  transform: scale(1.2);
 }
 
 .loading {
@@ -92,18 +95,3 @@
     transform: rotate(1turn);
   }
 }
-
-/* 添加logo脉冲效果动画 */
-@keyframes pulse-scale {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

src/App.vue

@@ -136,7 +136,7 @@ function animateAndRemoveLoader() {
       document.documentElement.style.removeProperty('background')
       // 显示页面
       show.value = true
-    }, 800) // 与CSS动画持续时间匹配
+    }, 500) // 与CSS动画持续时间匹配
   }
 }
 
@@ -149,12 +149,7 @@ 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(() => {
         // 移除加载动画（使用新的动画方法）
         animateAndRemoveLoader()