html卡片布局按钮,Material Design风格动态网格卡片布局UI设计

这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果。在该效果中鼠标滑过卡片时会有阴影效果，当浏览器尺寸改变时，卡片大小会随着改变，整个网格布局有动态变化效果。

使用方法

HTML结构

该动态网格卡片布局的HTML结构基于Bootstrap网格系统来实现。使用时要引入Bootstrap相关文件。

CSS样式

该动态网格卡片布局的CSS样式非常简单，首先带有以col- 开头的class的元素都设置动画过渡效果。开始的时候它们的透明度为0，尺寸为0。

.row [class*="col-"] {

cursor: pointer;

opacity: 0;

-moz-transform: scale(0);

-webkit-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

background-clip: padding-box !important;

border: 5px solid transparent;

}

然后程序开始执行后，会在jQuery代码中使用一个定时器来为这些元素添加.shown class，使它们逐一显示出来。

.row [class*="col-"].shown {

opacity: 1;

-moz-transform: scale(1);

-webkit-transform: scale(1);

transform: scale(1);

}

在鼠标滑过卡片的时候，动态的为卡片添加一些阴影效果。

.row [class*="col-"]:hover {

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

JavaScript

该动态网格卡片布局使用jQuery代码在浏览器窗口改变的时候修改卡片的高度，以及通过定时器为相应的元素添加.shownclass，用于逐一显示卡片。

;(function () {

var elems = $('.row [class*="col-"]');

var setHeight = function (elem) {

$(elem).height($(elem).width() + 30);

};

$(window).resize(function () {

$.each(elems, function (key, value) {

setHeight(elems[key]);

});

});

var i = 0;

x = true;

$(document).click(function () {

if (i === -1 || i == elems.length) {

animate();

x = !x;

}

});

var animate = function () {

setTimeout(function () {

$(elems[i]).toggleClass('shown');

setHeight(elems[i]);

x ? i++ : i--;

if (i < elems.length && i >= 0) {

animate();

}

;

}, 60);

};

animate();

}());