yglt-uniapp/pages/index/index.vue

<template>
	<view class="content">
		<div class="top">
			<ul>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="bottom">
			<Menu :type="0" />
		</div>
	</view>
</template>

<script setup>
	import Menu from '../../components/Menu.vue'
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: url('~@/static/home.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top {
		flex: 12;
	}

	.bottom {
		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>