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配合, ...
随机推荐
- 避免同一个文件被#include多次，可以用以下两种方式
1.#ifndef方式 2.#pragma once方式 方式一: #ifndef _SOMEFILE_H_ #define _SOMEFILE_H_ ... ...//一些声明语句 #end ...
- Gson格式转换Integer变为Double类型问题解决
问题描述 在前后端分离的开发模式下,前后端交互通常采用JSON格式数据.自然会涉及到json字符串与JAVA对象之间的转换.实现json字符串与Java对象相互转换的工具很多,常用的有Json.Gso ...
- centos7下NFS配置
NFS是Network File System的缩写,即网络文件系统.客户端通过挂载的方式将NFS服务器端共享的数据目录挂载到本地目录下. 前言 四台机器: ,218三台机器的/root/filedi ...
- 7-Perl 数组
1.Perl 数组Perl 数组一个是存储标量值的列表变量,变量可以是不同类型.数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下:#!/usr/bin/p ...
- Tomcat中的Host和Engine级别的servlet容器
这边文章主要介绍的是Host容器 和 Engine容器.如果你想在同一个Tomcat上部署运行多个Context容器的话,你就需要使用Host容器,从理论上来讲,如果你的Tomcat只想要部署一个Co ...
- python 的面试题总汇
函数作用域; LEGB : L>E>G>B L : local函数内部作用域 E : enclosing函数内部与内嵌函数之间 G : global全局作用域 B : build-i ...
- java实现spark常用算子之Reduce
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- eclipse设置字体
- Ubuntu下编译boost for Android
下载https://github.com/moritz-wundke/Boost-for-Android 解压后进入目录 运行 ./build-android.sh $(NDK_ROOT) NDK_R ...
- https和http的post发送总结
本文为转贴内容,感谢作者阿进! 需要转发数据到客户的https的服务器上出现一系列问题总结如下: 1.因为是https首先考虑到用最新的控件NetHTTPClient(只有在XE8以上才有). 2.客 ...