摘要：實現原理關鍵屬性畫圓放大平滑過渡獲取鼠標位置，動態態畫圓，延時放大，完成后移除元素部分按鈕樣式原始波紋樣式部分部分合并函數參數工具函數核心點擊位置元素位置對象轉化為字符串駝峰轉連字符添加瀏覽器兼容前綴獲得瀏覽器前綴

關鍵屬性 border-radius（畫圓） transform（scale放大） transition（平滑過渡）
獲取鼠標位置，動態態畫圓，延時放大，完成后移除元素

按鈕樣式

.btn {
         width: 200px;
         height: 56px;
         line-height: 56px;
         background: #426fc5;
         color: #fff;
         border-radius: 5px;
         text-align: center;
         cursor: pointer;
         overflow: hidden;
       }

原始波紋樣式

.waves-animation {
       position: absolute;
       border-radius: 50%;
       width: 25px;
       height: 25px;
       background: rgba(255, 255, 255, 0.3);
       transition: all 750ms ease-out;
       transform: scale(0);
   }

press me!

(function (root, factory, plugName) {
        if (typeof define === "function" && define.amd) {
            define([], factory);
        } else if (typeof module === "object" && module.exports) {
            module.exports = factory();
        } else {
            root[plugName] = factory();
        }
    })(self, function () {
        //合并函數
        var __assign = Object.assign || function (t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        }

        // 參數
        var __options = {
            selector: ".btn"
        }

        // 工具函數
        var __utils = {
            $: function (selector) {
                return document.querySelector(selector)
            }
        }

        // 核心
        function core(options) {
            this.params = __assign(__options, options)
            this.Element = __utils.$(this.params.selector)
            this.Element.addEventListener("click", this.showWaves.bind(this))
        }

        core.prototype = {
            showWaves: function (e) {
                var insertDiv = document.createElement("div")
                insertDiv.className =insertDiv.className + " waves-animation"
                this.Element.appendChild(insertDiv)

                var _mousePos = this.mousePos(e),
                    _offset = this.offset(this.Element),
                    startCss = {
                        left: _mousePos.x - _offset.left + "px",
                        top: _mousePos.y - _offset.top + "px",
                        opacity: 1
                    },
                    finishCss = {
                        left: _mousePos.x - _offset.left + "px",
                        top: _mousePos.y - _offset.top + "px",
                        opacity: 0
                    }
                startCss[this.prefixStyle("transform")] = "scale(" + _offset.width / 25 + ")"
                finishCss[this.prefixStyle("transform")] = "scale(" + _offset.width / 25 * 2 + ")"

                insertDiv.setAttribute("style", this.getStyle(startCss));
                setTimeout(function () {
                    insertDiv.setAttribute("style", this.getStyle(finishCss));
                    setTimeout(function () {
                        this.Element.removeChild(insertDiv)
                    }.bind(this), 750)
                }.bind(this), 100)
            },
            //點擊位置
            mousePos: function (e) {
                return {
                    x: e.pageX,
                    y: e.pageY
                };
            },
            // 元素位置
            offset: function (element) {
                return {
                    top: element.getBoundingClientRect().top,
                    left: element.getBoundingClientRect().left,
                    width: element.getBoundingClientRect().width
                }
            },
            // 對象轉化為css字符串
            getStyle: function (object) {
                var cssStr = ""
                for (var key in object) {
                    cssStr += key + ":" + object[key] + ";"
                }
                return cssStr
            },
            // 駝峰轉連字符
            toCSSStr(str){
                return str.replace(/([A-Z])/g,"-$1").toLowerCase();
            },
            //js 添加瀏覽器兼容前綴
            prefixStyle(style) {
                var vendor = this.vendor()
                if (!vendor) {
                    return false
                }
                if (vendor === "standard") {
                    return style
                }
                // return vendor + style.charAt(0).toUpperCase() + style.substr(1);
                return "-" + vendor + "-" + style;
            },
            // 獲得瀏覽器前綴
            vendor: function () {
                var elementStyle = document.createElement("div").style;
                var transformNames = {
                    webkit: "webkitTransform",
                    Moz: "MozTransform",
                    O: "OTransform",
                    ms: "msTransform",
                    standard: "transform"
                }
                for (var key in transformNames) {
                    if (elementStyle[transformNames[key]] !== "undefined") {
                        return key
                    }
                }
                return false
            }
        }
        return core
    }, "wavesBtn")
    new wavesBtn()