简单几行代码，就可以给bs框架添加material design风格
效果图：
这是常见的btn加了material design效果这里采用的是bootstrap4
引入：bs.css

material design for bootstrap
你可能看到上面多了一个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属性，即可实现该效果
更多特效后续上传。