9种纯CSS3人物信息卡片动态展示效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>.</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css" />
<link
href="https://fonts.googleapis.com/css?family=Lato:400,300,700,900"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<style>
body {
font-family: Lato, "Open Sans", sans-sarif;
font-size: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
max-width: 1000px;
}
.row {
width: 103%;
float: left;
margin: 110px -1.5%;
} /*= common css to all effects =*/
.single-member {
width: 280px;
float: left;
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(111.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;
}
/*= common css to all effects end =*/ /*= effect-1 css =*/
.effect-1 {
border-radius: 5px 5px 0 0;
padding-bottom: 40px;
}
.effect-1 .member-image {
border: 2px solid #fff;
border-radius: 60px 0;
display: inline-block;
margin-top: -72px;
overflow: hidden;
transition: 0.3s;
}
.effect-1 .social-touch {
background-color: #e13157;
position: absolute;
left: 0;
bottom: 0;
height: 5px;
overflow: hidden;
padding: 5px 0 0;
width: 100%;
transition: 0.3s;
}
.effect-1 .member-image img {
transition: 0.3s;
border-radius: 60px 0;
}
.effect-1:hover .member-image {
border-color: #e13157;
transition: 0.3s;
border-radius: 50%;
}
.effect-1:hover .social-touch {
padding: 6px 0;
height: 38px;
transition: 0.3s;
}
/*= effect-1 css end =*/ /*= effect-2 css =*/
.effect-2 {
max-height: 302px;
min-height: 302px;
overflow: hidden;
}
.effect-2 h3 {
padding-top: 7px;
line-height: 33px;
}
.effect-2 .member-image {
border-bottom: 5px solid #1fb554;
height: 212px;
overflow: hidden;
width: 100%;
transition: 0.4s;
display: inline-block;
float: none;
vertical-align: middle;
}
.effect-2 .member-info {
transition: 0.4s;
}
.effect-2 .member-image img {
width: 100%;
vertical-align: bottom;
}
.effect-2 .social-touch {
background-color: #1fb554;
float: left;
left: 0;
bottom: 0;
overflow: hidden;
padding: 5px 0;
width: 100%;
transition: 0.4s;
}
.effect-2:hover .member-image {
height: 81px;
transition: 0.4s;
}
/*= effect-2 css end =*/ /*= effect-3 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;
}
/*= effect-3 css end =*/ /*= effect-4 css =*/
.effect-4 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
}
.effect-4 h3 {
line-height: 35px;
}
.effect-4 .member-image {
position: absolute;
width: 100%;
transition: 0.4s;
}
.effect-4 .member-image img {
width: 100%;
}
.effect-4 .more-info {
height: 0;
transition: 0.4s;
overflow: hidden;
z-index: 9;
position: relative;
background-color: #fff;
}
.effect-4:hover .more-info {
height: 208px;
transition: 0.4s;
}
/*= effect-4 css end =*/ /*= effect-5 css =*/
.effect-5 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
}
.effect-5 .member-info {
background-color: #fff;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 82px;
transition: 0.3s;
z-index: 2;
}
.effect-5 .member-image {
margin-top: 82px;
float: left;
width: 100%;
position: relative;
transition: 0.3s;
z-index: 4;
}
.effect-5 .member-image img {
width: 100%;
}
.effect-5 .member-info:before {
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
left: 0;
position: absolute;
z-index: 9;
}
.effect-5:hover .member-info {
height: 215px;
transition: 0.3s;
z-index: 6;
}
.effect-5:hover .member-image {
margin-top: 200px;
transition: 0.3s;
}
/*= effect-5 css end =*/ /*= effect-6 css =*/
.effect-6 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
}
.effect-6 .member-info {
background-color: #fff;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 82px;
transition: 0.3s;
z-index: 2;
}
.effect-6 .member-image {
margin-top: 82px;
float: left;
width: 100%;
position: relative;
transition: 0.3s;
z-index: 4;
overflow: hidden;
}
.effect-6 .member-image img {
width: 100%;
}
.effect-6:hover .member-info {
height: 215px;
transition: 0.3s;
z-index: 6;
border-radius: 0 0 50% 50%;
overflow: hidden;
}
.effect-6:hover .member-image {
margin-top: 100px;
transition: 0.3s;
border-radius: 0;
}
/*= effect-6 css end =*/ /*= effect-7 css =*/
.effect-7 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
}
.effect-7 h3 {
line-height: 35px;
}
.effect-7 .member-image {
position: absolute;
bottom: 0;
width: 100%;
transition: 0.4s;
z-index: 1;
}
.effect-7 .member-image img {
width: 100%;
transition: 0.4s;
opacity: 1;
height: 100%;
}
.effect-7 .more-info {
height: 208px;
transition: 0.4s;
overflow: hidden;
position: relative;
background-color: #fff;
}
.effect-7:hover .member-image {
bottom: 40%;
}
.effect-7:hover .member-image img {
width: 0;
height: 0;
transition: 0.4s;
opacity: 0;
}
/*= effect-7 css end =*/ /*= effect-8 css =*/
.effect-8 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
perspective: 800px;
}
.effect-8 h3 {
line-height: 35px;
}
.effect-8 .member-image {
position: absolute;
bottom: 0;
width: 100%;
transition: 0.4s;
z-index: 1;
}
.effect-8 .member-image img {
width: 100%;
transition: 0.4s;
height: 100%;
}
.effect-8 .more-info {
height: 208px;
transition: 0.4s;
overflow: hidden;
position: relative;
background-color: #fff;
}
.effect-8:hover .member-image {
transform: rotateX(82deg);
transform-origin: center bottom 0;
transition: 0.4s;
}
/*= effect-8 css end =*/ /*= effect-9 css =*/
.effect-9 {
max-height: 289px;
min-height: 289px;
overflow: hidden;
perspective: 800px;
}
.effect-9 h3 {
line-height: 35px;
}
.effect-9 .member-image {
position: absolute;
bottom: 0;
width: 100%;
transition: 0.4s;
z-index: 1;
}
.effect-9 .member-image img {
width: 100%;
transition: 0.4s;
height: 100%;
}
.effect-9 .more-info {
height: 208px;
transition: 0.4s;
overflow: hidden;
position: relative;
background-color: #fff;
}
.effect-9:hover .member-image {
transform: translateY(100%);
transition: 0.4s;
}
/*= effect-9 css end =*/ /*= Media Query
=============== */
@media only screen and (max-width: 980px) {
.row {
width: 100%;
margin: 110px 0;
}
.team-members {
text-align: center;
}
.single-member {
float: none;
display: inline-block;
vertical-align: bottom;
}
}
/*= Media Query End
=================== */
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>9种纯CSS3人物信息卡片动态展示效果<span></span></h1>
</header>
<div class="full-length">
<div class="container">
<div class="team-members row">
<div class="single-member effect-1">
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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> <div class="single-member effect-2">
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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> <div class="single-member effect-3">
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</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> <div class="single-member effect-4">
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
</div>
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="more-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
eiusmod tempor incididunt.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
</div> <div class="single-member effect-5">
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
</div> <div class="single-member effect-6">
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
<div class="border-green"></div>
</div> <div class="single-member effect-7">
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
</div>
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="more-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
eiusmod tempor incididunt.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
</div> <div class="single-member effect-8">
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
</div>
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="more-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua,
Lorem ipsum dolor sit amet.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
</div> <div class="single-member effect-9">
<div class="member-info">
<h3>Sophia</h3>
<h5>ShowGilr</h5>
</div>
<div class="member-image">
<img src="bg.jpg" alt="Member" />
</div>
<div class="more-info">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua,
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
eiusmod tempor incididunt.
</p>
<div class="social-touch icon-colored">
<a class="fb-touch" href="#"></a>
<a class="tweet-touch" href="#"></a>
<a class="linkedin-touch" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自https://www.jianshu.com/p/4050f8ed6b1b
9种纯CSS3人物信息卡片动态展示效果的更多相关文章
- 纯CSS3实现的动感菜单效果
1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...
- Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。
Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...
- 纯CSS3实现常见多种相册效果
本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...
- 纯CSS3实现轮播切换效果
使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...
- web CSS3 实现3D动态翻牌效果
使用纯CSS3 实现翻牌效果 需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...
- 纯css3实现文字间歇滚动效果
场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...
- 纯css3代码写无缝滚动效果
主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...
- 纯Css3手工打造网页图片效果
.rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...
- CSS3特效----图片动态提示效果
需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...
随机推荐
- .NET 表达式计算：Expression Evaluator
Expression Evaluator 是一个轻量级的可以在运行时解析C#表达式的开源免费组件.表达式求值应该在很多地方使用,例如一些工资或者成本核算系统,就需要在后台动态配置计算表达式,从而进行计 ...
- hadoop集群搭建及易踩坑收录
配置前先把域名映射配好哈 详情参考我的其他随笔(哪里不通可以在下方评论) 下载好hdfs.tar.gz 后 在/home/ldy下 mkdir apps/ tar -xzvf hdfs.tar.gz ...
- Spring系列三：IoC 与 DI
水晶帘动微风起,满架蔷薇一院香. 概述 在软件工程中,控制反转(IoC)是一种设计思想,对象之间耦合在一起,在运行时自动绑定,并且它们编译时对所需要引用的对象是不确定的.在这个spring教程中,通过 ...
- 面试常考的js题目（三）
1.查找两个节点的最近的一个共同父节点,可以包括节点自身 function commonParentNode(oNode1, oNode2) { if(oNode1.contains(oNode2)) ...
- Scala学习十——特质
一.本章要点 类可以实现任意数量的特质 特质可以要求实现它们的类具备特定的字段,方法或超类 和Java接口不同,Scala特质可以提供方法和字段实现 当你将多个特质叠加在一起时,顺序很重要——其方法先 ...
- Linux Permission denied 问题
Linux Permission denied 问题 来源 https://www.cnblogs.com/sparkdev/p/10287164.html 如果当前用户没有某个文件的写权限,又要通 ...
- js多语言切换demo
网站为了国际化的需要,会使用到语言包,案例如下图. 这次尝试用js来打语言包,用到了插件 jquery.i18n.properties ,很明显,使用这个插件需要先加载jquery. 代码布局结构 ...
- Golang新开发者要注意的陷阱和常见错误
转自:http://colobu.com/2015/09/07/gotchas-and-common-mistakes-in-go-golang/ 目录 [−] 初级 开大括号不能放在单独的一行 未使 ...
- MySQL表内更新时，自动记录时间
1.创建表: create table test_time(id int primary key not null,status varchar(24),create_time datetime d ...
- oracle解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...