cloud

pages/BrandDisplay/BrandDisplay.vue

@@ -132,7 +132,7 @@
 
 	.top-left-content {
 		padding: 10rpx;
-		font-size: 10rpx;
+		font-size: 15rpx;
 		flex: 1;
 		display: flex;
 		justify-content: center;

pages/index/index.vue

@@ -1,7 +1,10 @@
 <template>
 	<view class="content">
 		<div class="top">
-
+			<ul>
+				<li></li>
+				<li></li>
+			</ul>
 		</div>
 		<div class="bottom">
 			<Menu :type="0" />
@@ -30,4 +33,58 @@
 		flex: 1;
 
 	}
+
+	* {
+		margin: 0;
+		padding: 0;
+	}
+
+	ul {
+		height: 330rpx;
+		animation: change 1s linear 0s infinite alternate;
+		position: relative;
+		overflow: hidden;
+		top: -200rpx;
+	}
+
+	ul li {
+		list-style: none;
+		width: 400%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		background-size: 300rpx 300rpx;
+	}
+
+	ul li:nth-child(1) {
+		background-image: url('~@/static/cloud1.png');
+		animation: one 60s linear 0s infinite alternate;
+	}
+
+	ul li:nth-child(2) {
+		background-image: url('~@/static/cloud2.png');
+		animation: tow 50s linear 0s infinite alternate;
+		margin: 30rpx;
+	}
+
+	@keyframes one {
+		from {
+			margin-left: 0;
+		}
+
+		to {
+			margin-left: -100%;
+		}
+	}
+
+	@keyframes tow {
+		from {
+			margin-left: -20%;
+		}
+
+		to {
+			margin-left: -200%;
+		}
+	}
 </style>