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配合, ...
随机推荐
- python的异常处理机制
异常机制己经成为衡量一门编程语言是否成熟的标准之一,使用异常处理机制的 Python 程序有更好的容错性,更加健壮. 对于计算机程序而言,情况就更复杂了一一没有人能保证自己写的程序永远不会出辛苦!就算 ...
- PostgreSQL查看表、表索引、视图、表结构以及参数设置
-- 表索引select * from pg_indexes where tablename='person_wechat_label';select * from pg_statio_all_ind ...
- Codeforces 1236A. Stones
传送门 注意到两种操作都要消耗中间的石头,并且两种操作每次都会得到 $3$ 个石头 那么显然优先做操作二是最优的,因为操作二只会消耗中间堆的一个石头 如果有剩下再进行操作 $1$ ,那么可以保证总操作 ...
- docker-compose.yml 部署Nginx、Java项目、MySQL、Redis
version: "3.7" services: nginx: image: nginx restart: always container_name: nginx environ ...
- js创建点击事件中<a>标签onclick传递多个参数
var rowIndex = e.rowIndex; var t = "<a href='javascript:void(0)' onclick=\"viewInfo('&q ...
- 配置lombok到eclipse上去
使用maven导入lombok.jar包,可以帮助我们省略掉getter/setting方法. 1.pom.xml 添加依赖: <dependency> <groupId>or ...
- Linux之curl
简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种.如果熟练的话,完全可以取代 Postm ...
- spring ioc aop 理解
OC,依赖倒置的意思,所谓依赖,从程序的角度看,就是比如A要调用B的方法,那么A就依赖于B,反正A要用到B,则A依赖于B.所谓倒置,你必须理解如果不倒置,会怎么着,因为A必须要有B,才可以调用B,如果 ...
- windows环境下，kafka常用命令
创建topics kafka-topics.bat --create --zookeeper localhost:2181 --replication-factor 1 --partition 3 - ...
- 基于Java使用Flink读取CSV文件,针对批处理,多表联合两种方式Table类和Join方法的实现数据处理,再入CSV文件
Maven依赖 源头 <dependencies> <dependency> <groupId>org.projectlombok</groupId> ...