手指触摸动画效果(完整代码附效果图)

 

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

示例一:  示例二:

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

 

1. // pages/test/test.js

2. Page({

3. containerTap: function (res) {

4. var that = this

5. var x = res.touches[0].pageX;

6. var y = res.touches[0].pageY + 85;

7. this.setData({

8. rippleStyle: ''

9. });

10. setTimeout(function () {

11. that.setData({

12. rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'

13. });

14. },200)

15. },

16. })

 

 

 

 

 

 

 

1. page{height:100%}

2. .container{

3. width:100%;

4. height:100%;

5. overflow: hidden

6. }

7. .ripple {

8. background-color: rgba(0, 0, 0, 0.6);

9. border-radius: 100%;

10. height:10px;

11. width:10px;

12. margin-top: -90px;

13. position: absolute;

14. -webkit-transform: scale(0);

15. overflow: hidden

16. }

17. @-webkit-keyframes ripple {

18. 100% {

19. -webkit-transform: scale(12);

20. transform: scale(12);

21. background-color: transparent;

22. }

23. }

 

示例二代码(html5)

 

3.  
10.  

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

14. BUTTON

 

 

转自：https://blog.csdn.net/qq_35713752/article/details/78682954