css

.mmd-waves{ box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius: 3px; display: inline-block; outline:none; border:0; overflow: hidden; position:relative; opacity: 0.9; text-align:center; } .mmd-waves:hover{ opacity: 1; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.20),0 3px 12px 0 rgba(0,0,0,0.16); } .mmd-waves-effect{ border-radius: 100%; background-color:#D8D8D8; left: 20px; top: 20px; transform: scale(0); width: 10px; height: 10px; position:absolute; } .mmd-waves-effect-animation{ animation: mmd-maves-animation-definition .8s ease-out; /*兼容各大浏览器*/ -moz-animation: mmd-maves-animation-definition .8s ease-out; -webkit-animation: mmd-maves-animation-definition .8s ease-out; -o-animation: mmd-maves-animation-definition .8s ease-out; } @keyframes mmd-maves-animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); /*因为涟漪的大小为标签的最长边,为了保证点击标签边缘时,涟漪也能覆盖整个标签,scale值最小应为2*/ opacity: 0; } } @-webkit-keyframes mmd-maves-animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); opacity: 0; } } @-moz-keyframes mmd-maves-animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); opacity: 0; } } @-o-keyframes mmd-maves-animation-definition { from{ transform: scale(0.1); opacity: 1; } to{ transform: scale(2); opacity: 0; } }
HTML

<b>不需要加p标签</b> <br/><br/> <button class="mmd-waves" style=" 125px;height: 40px;background-color: #27C4B4;color: white"> Button1 </button> <button class="mmd-waves" style=" 125px;height: 40px;background-color: #EE6E73;color: white"> Button2 </button> <br/> <br/> <b>需要加p标签<b> <br/><br/> <div class="mmd-waves" style=" 125px;height: 40px;background-color: #311B92;color: white"> <p style="line-height:40px; display:inline;">Div</p> </div> <a href="#" class="mmd-waves" style=" 125px;height: 40px;background-color: #FF9800;color: white"> <p style="line-height:40px; display:inline;">A</p> </a> <span class="mmd-waves" style=" 125px;height: 40px;background-color: #607D8B;color: white"> <p style="line-height:40px; display:inline;">Span</p> </span>
js

$(document).ready(function(){ $(".mmd-waves").mousedown(function(e) { var m = new MavesClass(); m.showWaves(this,e); }); }); //涟漪类,使其相对独立 function MavesClass(){ if(MavesClass.instance !== undefined){ return MavesClass.instance; } MavesClass.instance = this; this.showWaves = function(_this,e){ box = $(_this); wavesDiv = box.find("div"); //第一次没有涟漪div,动态生成 if(wavesDiv[0] == null){ var div = "<div class='mmd-waves-effect'></div>"; box.append(div); wavesDiv = box.find("div"); } //设置按钮样式为’waves-effect‘即去掉动画样式’waves-effect-animation‘ wavesDiv[0].className = 'mmd-waves-effect'; //计算涟漪坐标(折算成左上角坐标而非中心点),涟漪大小(取外标签最长边) var wH = box.width() > box.height() ? box.width() : box.height(); var iX = e.pageX - box.offset().left; var iY = e.pageY - box.offset().top; var nX = iX - wH/2; var nY = iY - wH/2; //设置涟漪div样式,准备播放动画 wavesDiv.css({ wH, height: wH, left: nX, top: nY }).addClass("mmd-waves-effect-animation");//播放动画 } }
依赖jquery,需要引入