上图看效果：预览有些掉帧是因为录制Gif压缩了，实际上很流畅的。
其实效果很简单：
大家应该都见过安卓手机上经常有扩散的水波纹特效，而且前端UI库也有很多，但是它们都是背景颜色扩散，不是这种线条波纹，怎么处理的呢，其实就是使用多个叠加的元素附加在指定目标上，叠加的元素需要是绝对定位，然后设置动画：随着时间修改padding大小，这个叠加的元素是有border的，这样border就被扩展开了，如何多个依次呢？让多个叠加的元素动画错开一点就好了。
看看代码，为了简单示例：我用了两个伪元素：after，before
<view class="usermotto pulse ">
<open-data type="userAvatarUrl"></open-data>
</view>
下面是CSS
.usermotto {
height: 150rpx;
/* background: #b6b6b6; */
border: 1px solid #b6b6b67c;
border-radius: 160rpx;
width: 150rpx;
margin: 20% auto;
overflow: hidden;
}
.pulse::before {
content: '';
display: block;
position: absolute;
width: 150rpx;
box-sizing: border-box;
height: 100%;
top: 0;
left:calc(50% - 75rpx);
border: inherit;
border-radius: inherit;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
-webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
animation: pulse-animation 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
z-index: -1;
}
.pulse::after {
content: '';
display: block;
position: absolute;
width: 150rpx;
box-sizing: border-box;
height: 100%;
top: 0;
left:calc(50% - 75rpx);
border: inherit;
border-radius: inherit;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
-webkit-animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
z-index: -1;
}
@keyframes pulse-animation {
0% {
opacity: 1;
padding: 10rpx;
transform: scale(1);
-webkit-transform: scale(1)
}
80% {
opacity: 0;
padding: 40rpx;
transform: scale(1.8);
-webkit-transform: scale(1.8)
}
100% {
opacity: 0;
padding: 60rpx;
transform: scale(2);
-webkit-transform: scale(2)
}
}
