纯CSS水波纹按钮效果

html

<button type="primary" @tap="distributeUser">
   <view class="animate wave">
     <view class="w1"></view>
     <view class="w2"></view>
     <view class="w3"></view>
     <view class="w4"></view>    
   </view>
   移动至
</button>

CSS

// 按钮特效
    @-webkit-keyframes opac{
            from {
                opacity: 1;
                width:0;
                height:0;
                top:50%;
                left:50%;
            }
            to {
                opacity : 0;
                width:100%;
                height:100%;
                top:0;
                left:0;
            }
        }
        .animate .w2{
            /*延迟1s*/
            -webkit-animation-delay:1s;
        }
        .animate .w3{
            -webkit-animation-delay:2s;
        }
        .animate .w4{
            -webkit-animation-delay:3s;
        }
        .wave{
            width: 22.7rem;
            height: 22.7rem;
            position: absolute;
            top: -320upx;
            left: -20%;
            right: 0;
            margin: 0 auto;
            z-index: 999;
        }
        .wave *{
            border:1px solid #ffffff;
            position:absolute;
            border-radius:100%;
            -webkit-animation:opac 4s infinite;
        }