feat: 登录页面标题添加动画

Former-commit-id: be6fdce737dc74e62ab90e0ca8da16125b1d07d4

src/views/login/index.vue

@@ -6,8 +6,10 @@
       :rules="loginRules"
       class="login-form"
     >
-      <div class="flex text-white items-center py-4">
+      <div class="flex text-white items-center py-4 title-wrap">
-        <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span>
+        <span class="text-2xl flex-1 text-center title">
+          {{ $t("login.title") }}
+        </span>
         <lang-select class="text-white! cursor-pointer" />
       </div>
 
@@ -217,6 +219,25 @@ onMounted(() => {
   overflow: hidden;
   background-color: #2d3a4b;
 
+  .title-wrap {
+    filter: contrast(30);
+
+    .title {
+      letter-spacing: 8px;
+      animation: showup 3s forwards;
+    }
+
+    @keyframes showup {
+      0% {
+        letter-spacing: -20px;
+      }
+
+      100% {
+        letter-spacing: 8px;
+      }
+    }
+  }
+
   .login-form {
     width: 520px;
     max-width: 100%;