当前位置：首页 > 网页特效 > 其他

Material Design风格动态网格卡片布局UI设计

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div class='container'>
  <div class='row'>
    <div class='col-xs-4'></div>
    <div class='col-xs-4'></div>
    <div class='col-xs-4'></div>
  </div>
  <div class='row'>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
    <div class='col-xs-1'></div>
  </div>
</div>    
```      
#####  CSS样式
该动态网格卡片布局的CSS样式非常简单，首先带有以col- 开头的class的元素都设置动画过渡效果。开始的时候它们的透明度为0，尺寸为0。

```html
.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，使它们逐一显示出来。

```html
.row [class*="col-"].shown {
  opacity: 1;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
} 
```               
在鼠标滑过卡片的时候，动态的为卡片添加一些阴影效果。

```html
.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，用于逐一显示卡片。

```html
;(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();
}());    
```

web299.com

Material Design风格动态网格卡片布局UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果