這是一款效果非常炫酷的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();

}());

總結

以上是生活随笔為你收集整理的html卡片布局按钮,Material Design风格动态网格卡片布局UI设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。