nuic home动画

src/views/home/index.vue

@@ -1,5 +1,14 @@
 <template>
-	<div class="home background-pink">
+	<div class="bg bg-1">
+		<div class="topright"></div>
+		<div class="bottomleft"></div>
+	</div>
+	<div class="bg bg-2">
+		<div class="bottom-1"></div>
+		<div class="bottom-2"></div>
+		<div class="bottom-3"></div>
+	</div>
+	<div class="home">
 		<left-nav />
 		<div class="right-main">
 			<top-nav />
@@ -38,4 +47,150 @@
 			}
 		}
 	}
+	.bg-1 {
+		z-index: -1;
+	}
+	.bg-2 {
+		@keyframes bg-2 {
+			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%;
+		// background-color: rgba(248, 247, 245, 1);
+		> * {
+			position: absolute;
+			border-radius: 50%;
+		}
+		> .topright {
+			width: 174.7rem;
+			height: 42.1rem;
+			top: -15.7rem;
+			right: -70rem;
+
+			background: linear-gradient(
+				86.85deg,
+				rgba(244, 147, 116, 0.6) 13.62%,
+				rgba(241, 193, 145, 0.6) 25.57%,
+				rgba(255, 178, 91, 0.582) 41.03%,
+				rgba(242, 173, 126, 0.6) 59.37%,
+				rgba(255, 232, 200, 0.6) 75.27%
+			);
+			opacity: 0.2;
+			filter: blur(20.7656rem);
+			transform: rotate(178.95deg);
+		}
+		> .bottomleft {
+			// border-radius: 0;
+			// border: 1px solid #000;
+			width: 62.418rem;
+			height: 68.245rem;
+			left: -30rem;
+			bottom: 0;
+
+			background: linear-gradient(
+				161.16deg,
+				rgba(132, 230, 255, 0.2) 14.98%,
+				rgba(255, 223, 142, 0.2) 68.79%
+			);
+			filter: blur(8.263rem);
+			transform: rotate(-25.36deg);
+		}
+		> .bottom-1 {
+			animation: bottom-1 0.5s ease-in-out 1 both;
+			background: linear-gradient(
+				87.58deg,
+				rgba(241, 193, 145, 0.8) 23.02%,
+				rgba(255, 178, 91, 0.776) 35.36%,
+				rgba(244, 147, 116, 0.8) 56.32%,
+				rgba(242, 173, 126, 0.8) 67.34%,
+				rgba(255, 232, 200, 0.8) 82.74%
+			);
+			filter: blur(13.17rem);
+			transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
+		}
+		> .bottom-2 {
+			animation: bottom-2 0.5s ease-in-out 1 both;
+
+			background: conic-gradient(
+				from 94.36deg at 71.77% 41.01%,
+				rgba(242, 171, 180, 0.2) 0deg,
+				rgba(255, 105, 117, 0.2) 100.75deg,
+				rgba(254, 59, 83, 0.2) 179.32deg,
+				rgba(255, 105, 117, 0.2) 252deg,
+				rgba(242, 171, 180, 0.2) 360deg
+			);
+			filter: blur(12.927rem);
+			transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
+		}
+		> .bottom-3 {
+			animation: bottom-3 0.5s ease-in-out 1 both;
+			background: linear-gradient(
+				130.72deg,
+				rgba(242, 171, 180, 0.24) 29.52%,
+				rgba(234, 133, 200, 0.24) 39.73%,
+				rgba(238, 64, 173, 0.24) 55.81%,
+				rgba(234, 133, 158, 0.24) 69.59%,
+				rgba(242, 171, 180, 0.24) 82.61%
+			);
+			filter: blur(11.5411rem);
+			transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
+		}
+		@keyframes bottom-1 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 138.014rem;
+				height: 29.323rem;
+				left: 32.123rem;
+				bottom: -21rem;
+				transform: translate(0, 0);
+			}
+		}
+		@keyframes bottom-2 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 42.215rem;
+				height: 98.009rem;
+				left: 150rem;
+				bottom: -65rem;
+				transform: translate(0, 0);
+			}
+		}
+		@keyframes bottom-3 {
+			0% {
+				width: 15rem;
+				height: 15rem;
+				left: 50%;
+				bottom: 50%;
+				transform: translate(0, 50%);
+			}
+			100% {
+				width: 51.936rem;
+				height: 97.139rem;
+				left: 40rem;
+				bottom: -65rem;
+				transform: translate(0, 0);
+			}
+		}
+	}
 </style>