简单几行代码，就可以给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属性，即可实现该效果

更多特效后续上传。

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

由于无法解决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

关键字：JavaScript, css, bootstrap

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！