摘要:實(shí)現(xiàn)原理關(guān)鍵屬性畫圓放大平滑過渡獲取鼠標(biāo)位置,動態(tài)態(tài)畫圓,延時放大,完成后移除元素部分按鈕樣式原始波紋樣式部分部分合并函數(shù)參數(shù)工具函數(shù)核心點(diǎn)擊位置元素位置對象轉(zhuǎn)化為字符串駝峰轉(zhuǎn)連字符添加瀏覽器兼容前綴獲得瀏覽器前綴
實(shí)現(xiàn)原理
關(guān)鍵屬性 border-radius(畫圓) transform(scale放大) transition(平滑過渡)
獲取鼠標(biāo)位置,動態(tài)態(tài)畫圓,延時放大,完成后移除元素
按鈕樣式
.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); }html 部分
js 部分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 () { //合并函數(shù) 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; } // 參數(shù) var __options = { selector: ".btn" } // 工具函數(shù) 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) }, //點(diǎn)擊位置 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 } }, // 對象轉(zhuǎn)化為css字符串 getStyle: function (object) { var cssStr = "" for (var key in object) { cssStr += key + ":" + object[key] + ";" } return cssStr }, // 駝峰轉(zhuǎn)連字符 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()
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/116768.html
摘要:實(shí)現(xiàn)原理關(guān)鍵屬性畫圓放大平滑過渡獲取鼠標(biāo)位置,動態(tài)態(tài)畫圓,延時放大,完成后移除元素部分按鈕樣式原始波紋樣式部分部分合并函數(shù)參數(shù)工具函數(shù)核心點(diǎn)擊位置元素位置對象轉(zhuǎn)化為字符串駝峰轉(zhuǎn)連字符添加瀏覽器兼容前綴獲得瀏覽器前綴 實(shí)現(xiàn)原理 關(guān)鍵屬性 border-radius(畫圓) transform(scale放大) transition(平滑過渡)獲取鼠標(biāo)位置,動態(tài)態(tài)畫圓,延時放大,完成后移除...
摘要:類似的效果步驟在頁面寫出一個并賦予簡單的樣式代碼這是一個按鈕默認(rèn)是無法用給它居中為了增加用戶體驗(yàn)為了保持和的位置關(guān)系為了遮蓋超出的效果添加水波紋的基礎(chǔ)樣式代碼為了保持和的位置關(guān)系水波紋圓形水波紋顏色下面與動畫效果相關(guān)是時候的狀態(tài)默認(rèn) 類似material-ui的button效果 步驟 1. 在頁面寫出一個button 并賦予簡單的樣式 代碼 這是一個按鈕 ...
摘要:最近想要在按鈕上添加的點(diǎn)擊效果,看了看,單純的想要這種效果,而要引入一些不必要的內(nèi)容覺得不劃算,然后自己動手造了個輪子。項(xiàng)目地址上傳不了圖只能用了效果使用文字只要在內(nèi)添加并且在內(nèi)傳入便可以實(shí)現(xiàn)水波紋效果。 最近想要在按鈕上添加material design的點(diǎn)擊效果,看了看muse-ui,單純的想要這種效果,而要引入一些不必要的內(nèi)容覺得不劃算,然后自己動手造了個輪子。項(xiàng)目地址:gith...
摘要:最近想要在按鈕上添加的點(diǎn)擊效果,看了看,單純的想要這種效果,而要引入一些不必要的內(nèi)容覺得不劃算,然后自己動手造了個輪子。項(xiàng)目地址上傳不了圖只能用了效果使用文字只要在內(nèi)添加并且在內(nèi)傳入便可以實(shí)現(xiàn)水波紋效果。 最近想要在按鈕上添加material design的點(diǎn)擊效果,看了看muse-ui,單純的想要這種效果,而要引入一些不必要的內(nèi)容覺得不劃算,然后自己動手造了個輪子。項(xiàng)目地址:gith...
閱讀 2485·2021-11-17 09:33
閱讀 772·2021-11-04 16:13
閱讀 1345·2021-10-14 09:50
閱讀 707·2019-08-30 15:53
閱讀 3675·2019-08-30 14:18
閱讀 3277·2019-08-30 14:14
閱讀 2112·2019-08-30 12:46
閱讀 3192·2019-08-26 14:05