添加动效

pages/down/index.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-26 16:08:17
  * @LastEditors: ch
- * @LastEditTime: 2022-05-27 16:52:18
+ * @LastEditTime: 2022-05-29 20:53:46
  * @Description: file content
 -->
 <template>
@@ -29,17 +29,21 @@
 				<span class="qcode--title">H5</span>
 			</li>
 		</ul>
-		<i class="bg1"></i>
-		<i class="bg1"></i>
-		<i class="bg1"></i>
-		<i class="bg1"></i>
-		<i class="bg1"></i>
+		<div class="bg">
+			<i class="bg--icon1"></i>
+			<i class="bg--icon2"></i>
+			<i class="bg--icon3"></i>
+			<i class="bg--icon4"></i>
+			<i class="bg--icon5"></i>
+		</div>
+		
 	</div>
 </template>
 <style lang="scss" scoped>
 .main{
 	height: calc(100vh - 132px);
 	overflow: hidden;
+	position: relative;
 }
 .title{
 	text-align: center;
@@ -73,6 +77,8 @@
 	margin: 73px auto;
 	display: flex;
 	justify-content: space-between;
+	z-index: 1;
+	position: relative;
 	li{
 		text-align: center;
 	}
@@ -87,13 +93,67 @@
 		margin: 25px 0;
 	}
 }
-.bg1{
-	position: fixed;
-	left: 0;
-	bottom: 45px;
-	width: 152px;
-	height: 257px;
-	background: url('@/assets/img/down/bg1.png');
-	background-size: 100%;
+.bg{
+	width: 1920px;
+	height: 100%;
+	@include adj(transform, translateX(-50%));
+	z-index: 0;
+	position: absolute;
+	left: 50%;
+	top: 0;
+	i{
+		position: absolute;
+		display: block;
+		background-size: 100%;
+	}
+	&--icon1{
+		bottom: 45px;
+		width: 152px;
+		height: 257px;
+		background-image: url('@/assets/img/down/bg1.png');
+	}
+	&--icon2{
+		top: 148px;
+		left: 140px;
+		width: 197px;
+		height: 214px;
+		background-image: url('@/assets/img/down/bg2.png');
+		animation: float 4s ease-in-out infinite;
+	}
+	&--icon3{
+		top: 549px;
+		left: 960px;
+		width: 116px;
+		height: 126px;
+		background-image: url('@/assets/img/down/bg3.png');
+		animation: float 5s ease-in-out infinite;
+	}
+	&--icon4{
+		top: 456px;
+		right: 261px;
+		width: 133px;
+		height: 137px;
+		background-image: url('@/assets/img/down/bg4.png');
+		animation: float 4s ease-in-out infinite;
+	}
+
+	&--icon5{
+		top: 0;
+		right: 0;
+		width: 192px;
+		height: 174px;
+		background-image: url('@/assets/img/down/bg5.png');
+	}
+}
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-50px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
 }
 </style>