Heim >Web-Frontend >HTML-Tutorial >Material Design for Bootstrap_html/css_WEB-ITnose

Material Design for Bootstrap_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-21 08:46:131217Durchsuche

简单几行代码,就可以给bs框架添加Material Design风格

效果图:

这是常见的btn加了Material Design效果这里采用的是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属性,对,等下我们就通过这个属性来实现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属性,即可实现该效果

更多特效后续上传。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn