音浪动画

// 布局 START
<view class="yin-move">
	<view class="yin-item "></view>
	<view class="yin-item item-2"></view>
	<view class="yin-item item-3"></view>
</view>
// 布局 END

// 样式 START
.yin-move{
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	transform: rotate(180deg);
	// align-items: center;
	// background-color: #000;
	// border-radius: 50%;

	.yin-item{
		width: 6rpx;
		height: 30rpx;
		margin-top: 10rpx;
		margin-right: 6rpx;
		background-color: #ff5500;

		-webkit-animation: yinlan-loading 1.2s infinite ease-in-out;
		animation: yinlan-loading 1.2s infinite ease-in-out;

		&.item-2{
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}
		&.item-3{
			-webkit-animation-delay: -1.4s;
			animation-delay: -1.4s;
		}
	}

}
// 样式 END

// 音浪动画 START
@-webkit-keyframes yinlan-loading {
	0%{
		height: 10rpx;
	}
	50%{
		height: 30rpx;
	}
	100%{
		height: 10rpx;
	}
}
@keyframes yinlan-loading {
	0%{
		height: 10rpx;
	}
	50%{
		height: 30rpx;
	}
	100%{
		height: 10rpx;
	}
}
// 音浪动画 END