当前位置:Gxlcms > JavaScript > jQuery实现点击水纹波动动画_jquery

jQuery实现点击水纹波动动画_jquery

时间:2021-07-01 10:21:17 帮助过:4人阅读

jQuery点击水纹波动动画原理:

1.在需要实现水波纹效果的标签中添加
2.代码会定位 鼠标相对 与 标签的位置,以鼠标点为圆心画圆
3.圆的半径 可以自定义(默认为标签的最大宽或高度)
4.圆点颜色,和动画时间等可以自行修改内部代码,或直接 调用 $().css({})方法 进行覆盖

ripple-wrapper.js

HTML



 

  
  Document
  

演示图

未封装代码



 

  
  Document
  

人气教程排行