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做延时处理是形成波浪的关键因素。