手机html卡片标题,移动手机Material Design风格信息卡片UI设计

这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果。该卡片设计效果中所有的卡片在点击或触摸之后，会以平滑过渡动画全屏展开。整个设计以扁平风格为主，非常时尚。

使用方法

HTML结构

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

• 9

  Tony
  Romo

  1 ^st

......

CSS样式

当一张卡片被点击之后，它首先会移动到屏幕的中间。这通过jQuery代码的moveCard()方法来完成。当这个动画结束的时候，div.card__full会被添加一个.activeclass，默认情况下，div.card__full是fixed定位，并通过transform: scaleY(0)将其隐藏。在添加了.activeclass之后，使用transform: scaleY(1)将它恢复，实现展开效果。

.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，使其全屏展开。

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;

};

完整的CSS和JS代码请参考下载文件。