移动端html模板卡片列表效果,移动手机Material Design风格信息卡片UI设计
这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果。该卡片设计效果中所有的卡片在点击或触摸之后,会以平滑过渡动画全屏展开。整个设计以扁平风格为主,非常时尚。
使用方法
HTML结构
该卡片UI的HTML结构分为2个部分。div.card__full是全屏的卡片,div.card__list是卡片列表。
9
Tony
Romo1st
......
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代码请参考下载文件。
移动端html模板卡片列表效果,移动手机Material Design风格信息卡片UI设计相关推荐
- html卡片布局按钮,Material Design风格动态网格卡片布局UI设计
这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果.在该效果中鼠标滑过卡片时会有阴影效果,当浏览器尺寸改变时,卡片大小会随着改变,整个网格布局有动态变化效果. 使用方 ...
- html点击波,Material Design风格按钮点击波动画效果
这是一款Material Design风格按钮点击波动画效果.该按钮设计在用户点击按钮时,按钮上会产生各种流光动画效果,非常炫酷. 使用方法 在页面中引入style.css文件. HTML结构 该Ma ...
- Material Design风格的水波涟漪效果(Ripple Effect)的实现
Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...
- 【MyAndroid】viewpage+cardView卡片叠层效果展示(2)--100个经典UI设计模板(98/100)
搞了大半个月凑合着叠层效果 开源代码地址:https://gitee.com/lc951/my-android 这里使用的是viewpager + cardView组件.全部是原生组件几乎没有自定义组 ...
- 【MyAndroid】RecyclerView+cardView卡片叠层效果展示(3)--100个经典UI设计模板(98/100)
布局: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint. ...
- Material Design风格神框架vuetify 学习笔记(七) 基础组件3 抽屉 卡片
一. 导航抽屉 v-navigation-drawer v-navigation-drawer是用户用于导航应用程序的组件. 导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用. ...
- PSD分层可临摹模板|无线端电商页面UI设计几个常见的错误
电商和移动电商都在崛起,因为便携设备让我们生活越来越方便. 入门的设计师往往会忽略的几个常见问题: 购物车没有显示任何数字:确保在用户添加商品后,购物车能立即显示出商品的数量. 编辑购物清单很难 :一 ...
- UI设计不够高端?这5个小技巧可以试试
UI培训设计是对软件的人机交互.操作逻辑.界面美观度的整体设计.好的UI设计不仅要让软件变得漂亮舒适,还要充分考虑到用户的操作问题. 从事UI设计的朋友们,肯定知道我们在做UI设计时,其实是可以通过一 ...
- Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局
作品介绍:Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布 ...
最新文章
- 坐标和变换的数学基础(2)
- 两边放动物对战守城的游戏_集合啦!动物森友会定制周边;百战天虫 大混战发布...
- Java Set接口
- windows 常用工具
- 截图如何能截到鼠标?脑洞小方法
- python练手_Python数据分析练手项目
- mysql将职称列改为工种_MySQL-其他
- android studio防止反编译,防反编译利器-Android studio混淆代码压缩apk包体积
- CCF NOI1034 钞票兑换
- 《战争online超极巨兽》故事起源
- java 空格变成问号_【转】空格变成问号的怪问题
- wampserver下载以及安装教程
- SpringBoot(四)整合视图
- Vue对高德地图2.0的封装使用
- java 中long和Long的区别
- esp32 micropython 控制ws2812 RGB灯带
- Linux_centos版初学(基础命令)
- JCTF 2014 -小试身手
- Kettle Job机制
- 确定目标:利用web分析技术诱捕受害者
热门文章
- 时间到,考试结束。请同学们交卷......
- RT-Thread逐飞-智能车培训之MM32芯片应用
- 条形压电陶瓷执行器件和高压驱动器
- 双轴机械臂调试:步进电机42HS348E,BH32角度传感器,MCU:STC8H1K28
- 人工智能电磁车模如何入手?
- html给img添加滤镜,给图片在博客中添加滤镜效果_CSS/HTML
- 递增三元组蓝桥杯c语言,第九届蓝桥杯_递增三元组(枚举的优化思路)
- c++程序目录结构_C程序结构
- Linux 内核网络子系统 总结 (未完待续)
- 三维曲面matlab程序,用matlab画三维曲面图 - 程序语言 - 小木虫 - 学术 科研 互动社区...