摘要:第二次修改源碼已放到由于無法解決事件不能獲取焦點標簽的坐標位置,所以只能用事件,而不能用類事件防止事件的濫用,改用事件核心樣式持續更新,也可以根據自己喜歡的樣式重新定義
簡單幾行代碼,就可以給bs框架添加Material Design風格
效果圖:
demo: http://jsoncode.github.io/mat...
這是常見的btn加了Material Design效果
這里采用的是bootstrap4
引入:bs.css
你可能看到上面多了一個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類事件核心js:
防止click事件的濫用,改用mousedown事件
(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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79628.html
摘要:這是一個用于構建響應式應用和網站的前端框架。是基于設計的一套豐富的組件。這是一個對混合式手機應用框架的擴展庫。到目前為止它僅大小,而且不依賴于任何第三方的插件,它可以很輕量的被用來創建和應用。 _Material design_是Google開發的,目的是為了統一公司的web端和手機端的產品風格。它是基于很多的原則,比如像合適的動畫,響應式,以及顏色和陰影的使用。完整的指南詳情請看這里...
摘要:這是一個用于構建響應式應用和網站的前端框架。是基于設計的一套豐富的組件。這是一個對混合式手機應用框架的擴展庫。到目前為止它僅大小,而且不依賴于任何第三方的插件,它可以很輕量的被用來創建和應用。 _Material design_是Google開發的,目的是為了統一公司的web端和手機端的產品風格。它是基于很多的原則,比如像合適的動畫,響應式,以及顏色和陰影的使用。完整的指南詳情請看這里...
摘要:第二次修改源碼已放到由于無法解決事件不能獲取焦點標簽的坐標位置,所以只能用事件,而不能用類事件防止事件的濫用,改用事件核心樣式持續更新,也可以根據自己喜歡的樣式重新定義 簡單幾行代碼,就可以給bs框架添加Material Design風格 效果圖:showImg(https://segmentfault.com/img/bVx7b9?w=336&h=83); demo: http://...
摘要:高顏值好用易擴展的微信小程序庫,有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架,支持定制主題,主要服務于前臺及中后臺產品。基于后臺管理系統。 快來Star,在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...
閱讀 2600·2021-11-15 11:38
閱讀 2618·2021-11-04 16:13
閱讀 17981·2021-09-22 15:07
閱讀 1014·2019-08-30 15:55
閱讀 3261·2019-08-30 14:15
閱讀 1663·2019-08-29 13:59
閱讀 3207·2019-08-28 18:28
閱讀 1575·2019-08-23 18:29