css和js实现 Material Design 水波纹点按效果

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，需要引入