动画animation

暖风阵阵

已于 2023-07-26 09:31:21 修改

阅读量95

点赞数

文章标签：前端

于 2023-07-26 09:27:51 首次发布

本文链接：https://blog.csdn.net/weixin_46899191/article/details/131931690

版权

<template>
	<view>
		<view class="animation-box flex align-center flex-wrap">
			<view class="box-1 box-a"></view>
			<view class="box-2 box-a"></view>
			<view class="box-3 box-a"></view>
			<view class="box-4 box-a"></view>
			<view class="box-5 box-a"></view>
			<view class="box-6 box-a"></view>
			<view class="box-7 box-a"></view>
			<view class="box-8 box-a"></view>
			<view class="box-9 box-a"></view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oneFlag: false
			}
		}
	}
</script>

<style lang='scss' scoped>
	.animation-box{
		position: relative;
		padding:30rpx;
		width:538rpx;
		height:610rpx;
		margin:100rpx auto 0;
		background-color: #eee;
		.box-a{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			background-color: #20c080;
			margin:20rpx;
			transform: rotate(45deg);
			border: 2rpx solid black;
		}
		.box-1{
			top: 300rpx;
			left: 10rpx;
			animation: falling01 1s linear;
		}
		.box-2{
			top: 410rpx;
			left: 120rpx;
			animation: falling02 1s linear;
		}
		.box-3{
			top: 520rpx;
			left: 230rpx;
			animation: falling03 1s linear;
		}
		.box-4{
			top: 200rpx;
			left: 120rpx;
			animation: falling04 0.8s linear;
		}
		.box-5{
			top: 310rpx;
			left: 230rpx;
			animation: falling05 0.8s linear;
		}
		.box-6{
			top: 410rpx;
			left: 340rpx;
			animation: falling06 0.8s linear;
		}
		.box-7{
			top: 90rpx;
			left: 220rpx;
			animation: falling07 0.6s linear;
		}
		.box-8{
			top: 200rpx;
			left: 330rpx;
			animation: falling08 0.6s linear;
		}
		.box-9{
			top: 300rpx;
			left: 450rpx;
			animation: falling09 0.6s linear;
		}
	}
	@keyframes falling09{
		0% {
			top: 0rpx;
		}
		100% {
			top: 300rpx;
		}
	}
	@keyframes falling08{
		0% {
			top: 0rpx;
		}
		100% {
			top: 200rpx;
		}
	}
	@keyframes falling07{
		0% {
			top: 0rpx;
		}
		100% {
			top: 90rpx;
		}
	}
	@keyframes falling06 {
		0% {
			top: 0rpx;
		}
		100% {
			top: 410rpx;
		}
	}
	@keyframes falling05 {
		0% {
			top: 0rpx;
		}
		100% {
			top: 310rpx;
		}
	}
	@keyframes falling04 {
		0% {
			top: 0rpx;
		}
		100% {
			top: 200rpx;
		}
	}
	@keyframes falling01 {
		0% {
			top: 0rpx;
		}
		100% {
			top: 300rpx;
		}
	}
	@keyframes falling02 {
		0% {
			top: 0rpx;
		}
		100% {
			top: 410rpx;
		}
	}
	@keyframes falling03{
		0% {
			top: 0rpx;
		}
		100% {
			top: 520rpx;
		}
	}
	/*  */
	.scroll-view {
		padding: 20rpx;
		margin: 30rpx 20rpx;
		background-color: #eee;
	}

	.img {
		width: 80rpx;
		height: 90rpx;
		animation: run-left-a 1s linear infinite backwards;
	}

	@keyframes run-left-a {
		from {
			left: 0;
		}

		to {
			left: -50%;
		}
	}

	.stop {
		animation-play-state: paused;
	}
	.flex {
		display: flex;
	}
	.align-center {
		align-items: center;
	}
	.flex-wrap{
		flex-wrap: wrap;
	}
</style>