几十行jQuery代码实现MaterialDesign的涟漪效果
时间：2023-03-30 22:06:07
CSS
个人博客：凌霄的博客序言作为一个md党，我非常喜欢md的涟漪效应。百度找的源码太复杂，自己写了一个。单击想法时效果开始。定位鼠标，以鼠标为波纹中心，让波纹逐渐扩大，将介绍隐藏到地方之外。波纹的半径默认为元素的宽度或高度（最大的一个）。波纹的颜色，速度可以自己修改。代码$(function(){$(".ripple").click(function(e){if($(this).find("#wave").length){$(this).find("#wave").remove();}$(this).append("
");varwave=$(this).find("#wave");wave.css({"display":"block",//波纹的颜色"background":"rgba(0,0,0,0.3)","border-radius":"50%","position":"absolute","-w??ebkit-transform":"scale(0)","transform":"scale(0)","opacity":"1",//纹波速度"transition":"all0.7s","-w??ebkit-transition":"所有0.7s","-moz-transition":"所有0.7s","-o-transition":"所有0.7s","z-index":"1","overflow":"hidden","pointer-events":"none"});//获取波纹的宽高waveWidth=parseInt($(this).outerWidth());waveHeight=parseInt($(this).outerHeight右());如果（waveWidth
