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,6 +34,26 @@ body,
 	}
 }
 
+@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/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 {
+		animation: z-index-10to-1 0.5s ease-in-out 1 both;
-			0% {
-				z-index: 10;
-			}
-			100% {
-				z-index: -1;
-			}
-		}
-		animation: bg-2 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;