css3之 谜灯卡片_9种纯CSS3人物信息卡片UI设计效果
插件描述:每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。
这是一组纯CSS3人物信息卡片UI设计效果。这组人物信息卡片共9种效果,每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。
使用方法
HTML结构
该人物信息卡片的基本HTML结构如下:
标题
子标题
描述信息...
CSS样式
为卡片添加一些通用样式:.single-member{
width: 280px;
float: left;
font-family: sans-sarif;
margin: 30px 2.5%;
background-color: #fff;
text-align: center;
position: relative;
}
.member-image img{
max-width: 100%;
vertical-align: middle;
}
h3 {
font-size: 24px;
font-weight: normal;
margin: 10px 0 0;
text-transform: uppercase;
}
h5 {
font-size: 16px;
font-weight: 300;
margin: 0 0 15px;
line-height: 22px;
}
p {font-size: 14px;
font-weight: 300;
line-height: 22px;
padding: 0 30px;
margin-bottom: 10px;
}
.social-touch a{
display: inline-block;
width: 27px;
height: 26px;
vertical-align: middle;
margin: 0 2px;
background-image: url(images/social-icons.png);
background-repeat: no-repeat;
opacity: 0.7;
transition: 0.3s;
}
.social-touch a:hover{
opacity: 1;
transition: 0.3s;
}
.fb-touch{
background-position: 0 0;
}
.tweet-touch{
background-position: -35px 0;
}
.linkedin-touch{
background-position: -71px 0;
}
.icon-colored .fb-touch{
background-position: 0 -27px;
}
.icon-colored .tweet-touch{
background-position: -35px -27px;
}
.icon-colored .linkedin-touch{
background-position: -71px -27px;
}
第三种效果的CSS代码如下:.effect-3{
max-height: 302px;
min-height: 302px;
overflow: hidden;
}
.effect-3 h3{
padding-top: 7px;
line-height: 33px;
}
.effect-3 .member-image{
border-bottom: 5px solid #e5642b;
transition: 0.4s;
height: 212px;
width: 100%;
display: inline-block;
float: none;
vertical-align: middle;
}
.effect-3 .member-info{
transition: 0.4s;
}
.effect-3 .member-image img{
width: 100%;
vertical-align: bottom;
}
.effect-3 .social-touch{
background-color: #e5642b;
float: left;
left: 0;
bottom: 0;
overflow: hidden;
padding: 5px 0;
width: 100%;
transition: 0.4s;
}
.effect-3:hover .member-image{
border-bottom: 0;
border-radius: 0 0 50px 50px;
height: 81px;
display: inline-block;
overflow: hidden;
width: 109px;
transition: 0.4s;
}
其它效果的CSS代码请参考下载文件。
css3之 谜灯卡片_9种纯CSS3人物信息卡片UI设计效果相关推荐
- css3 卡片亮光_9种纯CSS3人物信息卡片动态展示效果
通常在一些网站的网页上需要展示人物的个人信息,人物信息卡片是其中的一种展示方式,所以这一次给大家带来<9种纯CSS3人物信息卡片动态展示效果>.先上页面截图: 源代码下载: 9种纯CSS3 ...
- 6种纯css3徽章样式
下载地址 6种纯css3徽章样式 dd:
- html桌面卡牌效果,纯CSS3超酷文章卡片UI设计效果
这是一款使用纯CSS3制作的超酷文章卡片UI设计效果.该文章卡片带有阴影效果,当鼠标滑过卡片时,文章的描述信息会以滑动动画的方式显示在卡片中. 使用方法 HTML结构 一张卡片的HTML结构如下: 文 ...
- css3之 谜灯卡片_纯css3灯泡开关特效代码
纯CSS3和SVG鼠标滑过灯泡发光特效 相关css代码 .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: transl ...
- html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
- css3之 谜灯卡片_CSS3 迷幻光影文本特效
CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Raleway:100,900); @-webkit-key ...
- 鼠标动效html,5种纯CSS3鼠标hover按钮动画效果
这是一款鼠标hover按钮动画特效.该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果. 使用方法 HTML结构 该按钮特效使用 ...
- ux设计_9种改善电子商务UX的过滤设计最佳实践
ux设计 重点 (Top highlight) Every day, people visit online stores and leave them without making a purcha ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
最新文章
- java 导出excel 注解_Java基于注解和反射导入导出Excel
- CentOS下安装JDK1.7
- [云炬创业学笔记]第三章商业创意的发掘与评估测试3
- Scrum Guides 2017年最新修改
- Java 默认/缺省 内存大小,如果没有 -Xms -Xmx
- 一个屌丝程序猿的人生(七十七)
- ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome
- 数据结构与算法之图的深度优先遍历(DFS)
- java项目账户充值提现_资金充值提现明细
- 如何保证手机APP兼容性覆盖测试
- windows 控制台提示:请求的操作需要提升
- visual studio (VS)中文转英文(英文转中文)
- iOS 中设置下划线失效不显示
- 转录组入门(2):读文章拿到测序数据
- Python的异步编程介绍(MD)
- 计算机网络期末冲刺复习
- c1TrueDBGrid在C#中的研究
- 涨姿势:抛弃字母、数字和下划线写SHELL
- moviepy音视频剪辑:视频剪辑基类VideoClip的属性及方法详解
- opIndex多级索引笔记
热门文章
- Win10不能直接拖文件进行打开解决 办法
- 爱拼车猝死:BAT阴影下互联网创业如何进行?
- OpenGL视口变换函数:glViewport
- Uos窗管开发IDE介绍.VSCode
- 莽荒纪计算机游戏,莽荒纪电脑版
- RSA算法原理与实现(课程设计)
- WebView中点击全屏时的视频图像变形问题
- 手把手教程——自制ARM仿真器Jlink-OB-072,原来这么简单
- DD-∞-大数据面试流程及面试题
- 算法-给定一个字符串S = “I am a student. “,则输出“student. a am I“。