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配合, ...
随机推荐
- php 数组相关方法的一些实际妙用
一.php数组合并两个数组(一个数组做键名,另一个做值) 有两个方法 1.循环 $arry_a = array(0, 1, 2); $arry_b = array('dongsir','董先生','董 ...
- python安装OpenCV后import cv2报错解决办法
现在python安装完成后,运行pip install opencv-python安装成功后,import cv2时会失败 看到有人给出下载https://www.lfd.uci.edu/~gohlk ...
- the specified service is marked as deletion,can not find the file specified
使用命令注册windows service sc create CCGSQueueService binpath= "D:\DKX4003\services\xxx.xx.xx\xxx.ex ...
- 怎样使用 ssh 命令远程连接服务器?
以 Git Bash 和 阿里云 ECS云服务器 为例, 想要进行远程连接, 可以使用 ssh 用户名@服务器IP 进行连接. 如下: 注意: 1. 密码输入时是没有提示的 2. root 是超级管理 ...
- How to enable remote connections to SQL Server
<img src="https://miro.medium.com/max/1400/1*18lrHvJ8YtADJDT7hxIThA.jpeg" class="g ...
- 数据库SQL优化分析查询语句总结
方法一: SELECT TOP 10 TEXT AS 'SQL Statement' ,last_execution_time AS 'Last Execution Time' ,(total_log ...
- ThreadLocal的原理与使用
前言 在java web项目中,经常会使用到单例对象,从服务器启动那一时刻就实例化全局对象.然后会对某些全局对象的属性进行修改之类的操作,但是我们知道项目一般都是部署到tomcat.Jboss之类的服 ...
- centos配置vsftpd服务2
ftp搭建 一.搭建前提a.ssh服务已经开启,b.防火墙关闭,c.连网1.查看ssh和防火墙的状态 service sshd status service iptables status 2.开启s ...
- 页面加载时调用js函数方法
方法一:在html的body中加入onload=""事件 <body onload='queryServer()'> </body> 方法二:jquery ...
- asp.net Core 2.0 MVC为Controller或Action添加定制特性实现登录验证
前言:最近在倒腾 微软的新平台 asp.net Core 2.0,在这个过程中有些东西还是存在差异.下面是我在学习过程的一点笔记.有不妥之处,望各位大虾指正! 一.先创建一个控制器继承于Control ...