vue-cli 水滴波浪组件

1.波浪构思

波浪形成是由中心不断向外扩散，颜色由深到浅进行。话不多说，直接上干货。

<template>
	<div class="wave">
		<span class="wave_item" v-for="item in waveNum" :style="'--i:'+item+';--j:'+waveSize+';--k:'+waveNum"></span>
	</div>
</template>
		
<script>
	export default {
		name:"wave",
		props:{
			waveNum:{
				type:Number,
				default:3,
			},
			waveSize:{
				type:Number,
				default:250
			}
		}
	}
</script>
		
<style lang="scss" scoped>
	@keyframes wave{
		from{			
			transform: translate(-50%,-50%) scale(0);
			visibility:visible;
			opacity: 1;
		}
		to{
			transform: translate(-50%,-50%) scale(1);
			visibility:visible;
			opacity: 0;
		}
	};
	.wave{
		position: relative;
		&_item{
			width:calc(1px * var(--j));
			height:calc(1px * var(--j));
			position: absolute;
			left:0;
			top:0;
			transform: translate(-50%,-50%);			
			display: inline-block;
			visibility: hidden;
			background-color: #14FFFB;
			border-radius: 50%;
			animation: wave calc(1.5s * var(--k)) linear infinite;
			animation-delay: calc(1.5s * (var(--i) - 1));
		}
	}
</style>

可以自定义波浪大小及波浪数量（waveSize,waveNum）,可由父组件传递值来灵活渲染。
animation-delay做延时处理是形成波浪的关键因素。