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配合, ...
随机推荐
- 解决mac启动springboot项目很慢的问题
1.打开终端输入: hostname 查看电脑名称 2.输入命令修改hosts文件 sudo vi /etc/hosts 3. 在127.0.0.1和::1后边分别增加你的电脑名称 127.0.0.1 ...
- Android控制UI界面
⒈使用XML布局文件控制UI界面[推荐] Android推荐使用XML布局文件来控制视图,这样不仅简单.明了,而且可以将应用的视图控制逻辑从Java或Kotlin代码中分离出来,放入XML文件中控制, ...
- DP大大大大大赏
还是前置: 动态规划的三种实现方法: 递推,递归,记忆化搜索 然后还是从斐波那契数列开始引入: 两种求斐波那契数列的方法: 1.用其他位置的结果得到自己的结果: 2.用自己的结果算其他的结果: 以上两 ...
- 第一次入坑docker
直接进入主题 1.首先获取git clone项目 2.创建镜像:docker build -t="docker" .(注意千万不要忘了.) 3.列出镜像:docker images ...
- python-面向对象速查表-内置方法-内置函数-内置属性（只整理了部分内容）
今日临时总结的内容,可能还有些不正确的地方,初步当做个速查表吧. 类的内置函数(继承object的,自己重写) 内置函数 执行时机 注意点 调用案例 __init__ 实例化对象时 不允许写返回值(r ...
- 树莓派驱动开发 helloworld
编写Makefile ifneq ($(KERNELRELEASE),) obj-m := MiniX.o else KDIR := /home/hi/pi/kernel/linux/ all: ma ...
- mysql之存储过程基础
存储过程 procedure 可以理解为一个处理增删改,没有返回值得函数 创建存储过程的基本语法 create procedure 过程名 ([参数列表]) begin --过程体 end 存储过程主 ...
- Excel导入异常Cannot get a text value from a numeric cell解决
POI操作Excel时偶尔会出现Cannot get a text value from a numeric cell的异常错误. 异常原因:Excel数据Cell有不同的类型,当我们试图从一个数字类 ...
- WPF的硬件加速
wpf根据硬件 可以做出三档的渲染 dx7以下 第0档 不支持硬件加速 dx7-dx9 第1档, 不支持所有硬件加速,但支持一部分 dx9 以上 支持所有硬件加速 可以用编程的方式取代 当前设备处于 ...
- 《深入实践C++模板编程》之六——标准库中的容器
1.容器的基本要求 a.并非所有的数据都可以放进容器当中.各种容器模板对所存数据类型都有一个基本要求——可复制构造.将数据放进容器的过程就是通过数据的复制构造函数在容器内创建数据的一个副本的过程. b ...