b

src/assets/css/style.css

@@ -29,6 +29,22 @@ body,
     transform: rotate(360deg);
   }
 }
+@keyframes opacity-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes z-index-10to-1 {
+  0% {
+    z-index: 10;
+  }
+  100% {
+    z-index: -1;
+  }
+}
 .flex {
   display: flex;
 }

src/assets/css/style.less

@@ -34,35 +34,55 @@ body,
 	}
 }
 
-.flex{
+@keyframes opacity-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes z-index-10to-1 {
+	0% {
+		z-index: 10;
+	}
+
+	100% {
+		z-index: -1;
+	}
+}
+
+.flex {
 	display: flex;
 }
 
-.flex-center{
+.flex-center {
 	justify-content: center;
 	align-items: center;
 }
 
-.flex-1{
+.flex-1 {
 	flex: 1;
 }
 
-.flex-col{
+.flex-col {
 	flex-direction: column;
 }
 
-.align-center{
+.align-center {
 	align-items: center;
 }
 
-.space-between{
+.space-between {
 	justify-content: space-between;
 }
 
-.justify-center{
+.justify-center {
 	justify-content: center;
 }
 
-.relative{
+.relative {
 	position: relative;
 }

src/views/home/index.vue

@@ -49,22 +49,16 @@
 	}
 	.bg-1 {
 		z-index: -1;
+		animation: opacity-in 0.5s ease-in-out 1 both;
 	}
 	.bg-2 {
-		@keyframes bg-2 {
-			0% {
-				z-index: 10;
-			}
-			100% {
-				z-index: -1;
-			}
-		}
-		animation: bg-2 0.5s ease-in-out 1 both;
+		animation: z-index-10to-1 0.5s ease-in-out 1 both;
 	}
 	.bg {
 		position: absolute;
 		width: 100%;
 		height: 100%;
+		overflow: hidden;
 		// background-color: rgba(248, 247, 245, 1);
 		> * {
 			position: absolute;