微信小程序的水波纹效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<view> <view class="ripple" style="{{changeStyle}}"></view> <view class="container" bindtouchstart="containerTap">测试</view> </view>       .container{     width:100%;     height:500px; } .ripple {     background-color: rgba(181, 236, 240, 0.8);     border-radius: 100%;     height:10px;     width:10px;     margin-top: -90px;     position: absolute;     transform: scale(0); } @keyframes changeAnimate {     100% {     transform: scale(12);     background-color: transparent;     } }       //index.js //获取应用实例 const app = getApp()    Page({   data: {       },   onLoad: function () {   },  containerTap: function (res) {    var that=this;     var x = res.touches[0].pageX;     var y = res.touches[0].pageY + 85;     this.setData({       changeStyle: 'top:' + y + 'px;left:' + x + 'px;animation:changeAnimate 0.4s linear;'     });  setTimeout(function(){    that.setData({      changeStyle: ''    });  },500)   } })

　　原文地址:https://blog.csdn.net/weixin_42120767/article/details/100143015?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf