你的位置:首页 > 网页设计

[网页设计]9种纯CSS3人物信息卡片UI设计效果


这是一组纯CSS3人物信息卡片UI设计效果。这组人物信息卡片共9种效果,每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效。

 

在线预览    源码下载

使用方法

 HTML结构

该人物信息卡片的基本HTML结构如下:

<div class="single-member effect-3"> <div class="member-image">  <img src="demo.jpg" alt=""> </div> <div class="member-info">  <h3>标题</h3>  <h5>子标题</h5>  <p>描述信息...</p>  <div class="social-touch">   <a class="fb-touch" href="#"></a>   <a class="tweet-touch" href="#"></a>   <a class="linkedin-touch" href="#"></a>  </div> </div></div>      

 
 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代码请参考下载文件。

在线预览    源码下载