微信小程序的水波紋效果

<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