登录

src/assets/scss/pages/login.scss

@@ -31,6 +31,26 @@
   width: 650px;
   height: 500px;
 
+  @keyframes title {
+    0% {
+      transform: translateY(-100px);
+      transform: scale(0%);
+      opacity: 0;
+    }
+
+    50% {
+      transform: translateY(-100px);
+      transform: scale(50%);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateY(0);
+      transform: scale(100%);
+      opacity: 1;
+    }
+  }
+
   .title {
     margin: 0 auto;
     text-align: center;
@@ -42,6 +62,26 @@
     background: linear-gradient(0deg, #0385ff 0%, #ffffff 50%, #ffffff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    animation: title 0.33s * 1.5 ease-out;
+  }
+
+  @keyframes decorationLeft {
+    0% {
+      transform: translateX(100px);
+    }
+
+    100% {
+      transform: translateX(0px);
+    }
+  }
+  @keyframes decorationRight {
+    0% {
+      transform: translateX(-100px);
+    }
+
+    100% {
+      transform: translateX(0px);
+    }
   }
 
   .decoration {
@@ -51,6 +91,7 @@
       top: 70px;
       width: 54px;
       height: 377px;
+      animation: decorationLeft 0.33s ease-out;
     }
     .i-right {
       position: absolute;
@@ -58,10 +99,21 @@
       top: 70px;
       width: 54px;
       height: 377px;
+      animation: decorationRight 0.33s ease-out;
     }
   }
 
+  @keyframes fm {
+    0% {
+      transform: scale(50%);
+      opacity: 0.3;
+    }
 
+    100% {
+      transform: scale(100%);
+      opacity: 1;
+    }
+  }
 
   .fm {
     box-sizing: border-box;
@@ -71,6 +123,7 @@
     height: 368px;
     background-image: url(~@/assets/imgs/login/card-bg.png);
     background-size: cover;
+    animation: fm 0.33s ease-out;
 
     .fm-item {
       box-sizing: border-box;