<!-- payPage.vue -->

<template>
	<view class="bubble">
		<image class="your-div-class" v-for="(item, index) in items" :key="index" :style="{
	        animationDelay: item.delay + 's',
	        left: item.startX + 'rpx'
	      }" :src="`/static/bubble/${index}.png`" mode=""></image>
		<!-- <view class="your-div-class" v-for="(item, index) in items" :key="index" :style="{
	        animationDelay: item.delay + 's',
	        left: item.startX + 'rpx'
	      }"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: Array.from({
					length: 6
				}).map(() => ({
					delay: Math.random() * 5,
					startX: Math.random() *
					500, // Assuming the container width is 500px and element width is 50px
				}))
			};
		},
		onLoad(query) {},
		methods: {},
	};
</script>
<style lang="scss" scoped>
	.bubble {
		width: 100%;
		height: 90%;
		position: relative;
		overflow: hidden;
		// background-color: red;
	}

	.your-div-class {
		width: 100rpx;
		/* 自定义宽度 */
		height: 100rpx;
		/* 自定义高度 */
		position: absolute;
		bottom: -110rpx;
		// background-color: #3498db;
		/* 蓝色 */
		border-radius: 50%;
		/* 圆形 */
		animation: moveUp 4s linear infinite, moveHorizontal 4s ease-in-out infinite alternate;
		transform: translateX(0);
		/* 初始位置 */
	}

	@keyframes moveUp {
		0% {
			bottom: 0;
			opacity: 0;
			transform: translateY(0);
			/* 初始位置 */
		}

		50% {
			opacity: 1;
		}

		100% {
			bottom: 100%;
			opacity: 0;
			transform: translateY(-100%);
			/* 终止位置 */
		}
	}

	@keyframes moveHorizontal {

		0%,
		100% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(100rpx);
			/* 随机范围内的最大水平移动距离 */
		}
	}
</style>