VUE之彩虹点击

 效果如图所示

<template>
	<view class="content">
			<view class="view71" hover-class="view7" :hover-start-time="3000" :hover-stay-time="800">
				<view class="view61" hover-class="view6" :hover-start-time="2500" :hover-stay-time="9000">
					<view class="view51" hover-class="view5" :hover-start-time="2000" :hover-stay-time="10000">
						<view class="view41" hover-class="view4" :hover-start-time="1500" :hover-stay-time="11000">
							<view class="view31" hover-class="view3" :hover-start-time="1000" :hover-stay-time="12000">
								<view class="view21" hover-class="view2" :hover-start-time="500" :hover-stay-time="13000">
									<view class="view11" hover-class="view1" :hover-start-time="0" :hover-stay-time="14000">	
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {				
			}
		},
		onLoad() {

		},
		methods: {			
		},
	}
</script>

<style>
	view{
		width: 100%;
		background-color: #FFFFFF;
		border: #000000;
	}
	.view1{
		
		background-color:#6257A3 ;
	}
	.view2{
		
		background-color:#3667B3 ;
	}
	.view3{
		
		background-color:#42C6ED ;
	}
	.view4{
		
		background-color:#70C051 ;
	}
	.view5{
		
		background-color:#F2ED48 ;
	}
	.view6{
	
		background-color:#F48926 ;
	}
	.view7{
		
		background-color:#F02E2E ;
	}
	.view11{
		height: 100rpx;
		
	}
	.view21{
		height: 200rpx;
		
	}
	.view31{
		height: 300rpx;
		
	}
	.view41{
		height: 400rpx;
		
	}
	.view51{
		height: 500rpx;
		
	}
	.view61{
		height: 600rpx;
		
	}
	.view71{
		height: 700rpx;
		
	}
	.content {
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>