Bootstrap_html/css_WEB-ITnose のマテリアル デザイン

わずか数行のコードで、BS フレームワークにマテリアル デザイン スタイルを追加できます。

レンダリング:

これは共通の追加 ここでのマテリアル デザイン効果は bootstrap4

で導入されています: bs.css

<link rel="stylesheet" href="css/bootstrap.min.css">

<button class="btn btn-secondary" type="button" materialDesign>Material Design for Bootstrap</button>

上記に追加のmaterialDesign属性があることがわかります。はい、渡しますこの属性は後でマテリアル デザイン効果を実現するために使用されます。

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 属性を任意のオブジェクトに追加するだけです。このエフェクト

他の特殊効果は後でアップロードされます。