纯CSS水波纹按钮效果

html

1 <button type="primary" @tap="distributeUser">
2    <view class="animate wave">
3      <view class="w1"></view>
4      <view class="w2"></view>
5      <view class="w3"></view>
6      <view class="w4"></view>    
7    </view>
8    移动至
9 </button>

CSS

 1 // 按钮特效
 2     @-webkit-keyframes opac{
 3             from {
 4                 opacity: 1;
 5                 width:0;
 6                 height:0;
 7                 top:50%;
 8                 left:50%;
 9             }
10             to {
11                 opacity : 0;
12                 width:100%;
13                 height:100%;
14                 top:0;
15                 left:0;
16             }
17         }
18         .animate .w2{
19             /*延迟1s*/
20             -webkit-animation-delay:1s;
21         }
22         .animate .w3{
23             -webkit-animation-delay:2s;
24         }
25         .animate .w4{
26             -webkit-animation-delay:3s;
27         }
28         .wave{
29             width: 22.7rem;
30             height: 22.7rem;
31             position: absolute;
32             top: -320upx;
33             left: -20%;
34             right: 0;
35             margin: 0 auto;
36             z-index: 999;
37         }
38         .wave *{
39             border:1px solid #ffffff;
40             position:absolute;
41             border-radius:100%;
42             -webkit-animation:opac 4s infinite;
43         }

世界上没有什么偶然，有的只有必然。——壹原侑子