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;            
        } 
    }        

View Code

HTML

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

View Code

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({
            width: wH,
            height: wH,
            left: nX,
            top: nY
        }).addClass("mmd-waves-effect-animation");//播放動畫
    }
}

View Code

依賴jquery，須要引入