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

移动手机Material Design风格信息卡片UI设计

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

简介

##### HTML结构
该卡片UI的HTML结构分为2个部分。div.card__full是全屏的卡片，div.card__list是卡片列表。

```html
<div class="view">
  <div class="card__full">
    <div class="card__full-top">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"></path>
          <path d="M0 0h24v24h-24z" fill="none"></path>
      </svg>
      <span class="card__full-num"></span>
    </div>
    <div class="card__full-bottom">
      <p class="card__full-handle"></p>
      <p class="card__full-info"></p>
    </div>
  </div>
  <ul class="card__list">
    <li class="card__item card__item--blue">
      <div class="card__info">
        <div class="info-player">
          <p class="info-player__num">9</p>
          <p class="info-player__name"><small>Tony</small><br>Romo</p>
        </div>
        <div class="info-place">1<sup>st</sup></div>
      </div>
    </li>
    ......
  </ul>
</div>
```
#####  CSS样式
当一张卡片被点击之后，它首先会移动到屏幕的中间。这通过jQuery代码的moveCard()方法来完成。当这个动画结束的时候，div.card__full会被添加一个.activeclass，默认情况下，div.card__full是fixed定位，并通过transform: scaleY(0)将其隐藏。在添加了.activeclass之后，使用transform: scaleY(1)将它恢复，实现展开效果。

```html
.card__full {
  will-change: transform;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 384px;
  height: 640px;
  z-index: 2;
  visibility: hidden;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scaleY(0) translate(-50%, -50%);
          transform: scaleY(0) translate(-50%, -50%);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card__full.active {
  visibility: visible;
  -webkit-transform: scaleY(1) translate(-50%, -50%);
          transform: scaleY(1) translate(-50%, -50%);
}
.card__full.active .card__full-num,
.card__full.active .card__full-handle,
.card__full.active .card__full-info {
  opacity: 1;
}    
```
#####  Javascript
为了计算卡片移动到屏幕中间的距离，这里使用使用w.innerHeight()/2 - selfO.top -4来得到要移动的距离，然后使用translateY()函数来移动它。然后在动画结束的时候，为div.card__full添加.active class，使其全屏展开。

```html
var moveCard = function() {
  var self = $(this);
  var selfIndex = self.index();
  var selfO = self.offset();
  var ty = w.innerHeight()/2 - selfO.top -4;
   
  var color = self.css('border-top-color');
  cardfulltop.css('background-color', color);
  cardhandle.css('color', color);
   
  updateData(selfIndex);
   
  self.css({
    'transform': 'translateY(' + ty + 'px)'
  });
       
  self.on('transitionend', function() {
    cardfull.addClass('active');
    self.off('transitionend');
  });
   
  return false;
};    
```

web299.com

移动手机Material Design风格信息卡片UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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