Material Design for Bootstrap

簡單幾行代碼，就能夠給bs框架添加Material Design風格

效果圖：

demo: http://jsoncode.github.io/mat...

這是常見的btn加了Material Design效果
這裏採用的是bootstrap4

引入：bs.css

<link rel="stylesheet" href="css/bootstrap.min.css">

<button class="btn btn-secondary" type="button" materialDesign>Material Design for Bootstrap</button>

你可能看到上面多了一個materialDesign屬性，對，等下咱們就經過這個屬性來實現material Design效果

css:

[materialDesign] {
    display: inline-block;
    letter-spacing: .8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.animate-hand{
    height: 134px;
    width: 134px;
    display: block;
    position: absolute;
    background: currentColor;
    opacity: 0.6;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    z-index: 0;
}
.animate-hand.animate {
    -webkit-animation: ripple .5s linear;
    animation: ripple .5s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(4.5);
        transform: scale(4.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(4.5);
        transform: scale(4.5);
    }
}

js：

(function() {
    for (var i = 0, btn; btn = document.querySelectorAll('[materialDesign]')[i++];) {
        btn.addEventListener('click', function(e) {
            var tag = this;
            if (this.getAttribute('materialDesign') === undefined) {
                tag = this.parentNode;
            }
            var div = tag.querySelector(".animate-hand");
            if (!div) {
                div = document.createElement("div");
                tag.appendChild(div);
            }
            div.className = 'animate-hand';
            var x = e.pageX;
            var y = e.pageY;
            var left = tag.offsetLeft;
            var top = tag.offsetTop;
            var height = div.offsetHeight;
            var width = div.offsetWidth;
            div.className = "";

            div.style.left = x - left - width / 2 + "px";
            div.style.top = y - top - height / 2 + "px";
            div.className = "animate-hand animate";
        });
    }
})();

搞定，只要在任意一個標籤上添加materialDesign屬性，便可實現該效果

更多特效後續上傳。

---

第二次修改：
源碼已放到github：https://github.com/jsoncode/m...

因爲沒法解決touch事件不能獲取焦點標籤的座標位置，因此只能用click事件，而不能用touch類事件
防止click事件的濫用，改用mousedown事件

核心js：

(function() {
    'use strict';
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
    function DOMContentLoaded() {
        for (var i = 0, btn; btn = document.querySelectorAll('[materialDesign]')[i++];) {
            btn.addEventListener('mousedown', materialDesignBg);
        }
    }
    function materialDesignBg(e) {
        e.preventDefault();
        e.stopPropagation();
        var tag = this;
        var div = tag.querySelector(".animate-hand");
        if (!div) {
            div = document.createElement("div");
        }
        div.className = 'animate-hand';
        tag.insertBefore(div, tag.firstElementChild);

        var scale = Math.round(tag.offsetWidth / 100) || 1;
        var left = e.layerX;
        var top = e.layerY;

        div.style.left = left + "px";
        div.style.top = top + "px";
        scale = scale > 6 ? 6 : scale;
        div.className = "animate-hand animate ripple_" + (e.changedTouches ? scale + 1 : scale);
        if (tag.nodeName != 'A' && tag.getAttribute("href")) {
            location.href = tag.getAttribute("href");
        }
        return false;
    }
})();

樣式持續更新，也能夠根據本身喜歡的樣式從新定義bootstrap