[微信小程序]手指触摸动画效果(完整代码附效果图)

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

本文共有两个示例,先上图 

示例一:  示例二:

示例一代码(微信小程序):

 

// pages/test/test.js
Page({
  containerTap: function (res) {
    var that = this
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      rippleStyle: ''
    });
    setTimeout(function () {
      that.setData({
        rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
      });
    },200)
  },
})

 

 

 

 

 

 

 

page{height:100%}
.container{
    width:100%;
    height:100%;
    overflow: hidden
}
.ripple {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
    height:10px;
    width:10px;
    margin-top: -90px;
    position: absolute;
    -webkit-transform: scale(0);
    overflow: hidden
}
@-webkit-keyframes ripple {
    100% {
    -webkit-transform: scale(12);
    transform: scale(12);
    background-color: transparent;
    }
}

 

示例二代码(html5)

 

	
		
		
		
		
	

	
		
点击后水波纹扩散填充组件效果
		

			BUTTON