CSS3团队成员介绍卡片动画特效代码

分享 :

网盘下载链接:

提取密码: redz
复制提取密码
这是一款CSS3团队成员介绍卡片动画特效。该卡片特效用于介绍某个团队的成员,卡片上带有人物的头像,简单的描述信息。当鼠标hover卡片时,会出现该成员人物的社交联系方式图标。
  • 详情
    文件来源

    网络收集

    更新日期

    2018-01-03

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    34次

    效果预览:

  • 使用说明

    在页面中引入bootstrap和font-awesome文件。

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    

    HTML结构

    该CSS3团队成员介绍卡片特效的基本HTML结构如下:

    <div class="container">
    	<div class="row">
    		<div class="col-md-3 col-sm-6">
    			<div class="our-team">
    				<div class="pic">
    					<img src="images/1.jpg">
    				</div>
    				<div class="team-content">
    					<h3 class="title">51RGB</h3>
    					<Span class="post">专业在线教育培训机构</Span>
    				</div>
    				<ul class="social">
    					<li><a href="http://wpa.qq.com/msgrd?v=3&uin=1813028524&site=qq&menu=yes" class="fa fa-qq"></a></li>
    					<li><a href="#" class="fa fa-weixin"></a></li>
    					<li><a href="#" class="fa fa-weibo"></a></li>
    					<li><a href="#" class="fa fa-envelope"></a></li>
    				</ul>
    			</div>
    		</div>
    
    		<div class="col-md-3 col-sm-6">
    			<div class="our-team">
    				<div class="pic">
    					<img src="images/2.jpg">
    				</div>
    				<div class="team-content">
    					<h3 class="title">小吴老师</h3>
    					<Span class="post">Customer service</Span>
    				</div>
    				<ul class="social">
    					<li><a href="http://wpa.qq.com/msgrd?v=3&uin=1813028524&site=qq&menu=yes" class="fa fa-qq"></a></li>
    					<li><a href="#" class="fa fa-weixin"></a></li>
    					<li><a href="#" class="fa fa-weibo"></a></li>
    					<li><a href="#" class="fa fa-envelope"></a></li>
    				</ul>
    			</div>
    		</div>
    
    		<div class="col-md-3 col-sm-6">
    			<div class="our-team">
    				<div class="pic">
    					<img src="images/3.jpg">
    				</div>
    				<div class="team-content">
    					<h3 class="title">卉卉老师</h3>
    					<Span class="post">Customer service</Span>
    				</div>
    				<ul class="social">
    					<li><a href="http://wpa.qq.com/msgrd?v=3&uin=2879113194&site=qq&menu=yes" class="fa fa-qq"></a></li>
    					<li><a href="#" class="fa fa-weixin"></a></li>
    					<li><a href="#" class="fa fa-weibo"></a></li>
    					<li><a href="#" class="fa fa-envelope"></a></li>
    				</ul>
    			</div>
    		</div>
    
    		<div class="col-md-3 col-sm-6">
    			<div class="our-team">
    				<div class="pic">
    					<img src="images/4.jpg">
    				</div>
    				<div class="team-content">
    					<h3 class="title">小美老师</h3>
    					<Span class="post">Customer service</Span>
    				</div>
    				<ul class="social">
    					<li><a href="http://wpa.qq.com/msgrd?v=3&uin=1830553957&site=qq&menu=yes" class="fa fa-qq"></a></li>
    					<li><a href="#" class="fa fa-weixin"></a></li>
    					<li><a href="#" class="fa fa-weibo"></a></li>
    					<li><a href="#" class="fa fa-envelope"></a></li>
    				</ul>
    			</div>
    		</div>
    	</div>
    </div>
    

    CSS样式

    通过下面的CSS代码来对该团队成员介绍卡片特效进行美化,并添加鼠标hover卡片的动画效果。

    .demo{padding: 2em 0;}
    .our-team{
    	padding: 30px 0 40px;
    	background: #f7f5ec;
    	text-align: center;
    	overflow: hidden;
    	position: relative;
    }
    .our-team .pic{
    	display: inline-block;
    	width: 130px;
    	height: 130px;
    	margin-bottom: 50px;
    	z-index: 1;
    	position: relative;
    }
    .our-team .pic:before{
    	content: "";
    	width: 100%;
    	height: 0;
    	border-radius: 50%;
    	background: #ee4266;
    	position: absolute;
    	bottom: 135%;
    	right: 0;
    	left: 0;
    	opacity: 0.2;
    	transform: scale(3);
    	transition: all 0.3s linear 0s;
    }
    .our-team:hover .pic:before{ height: 100%; }
    .our-team .pic:after{
    	content: "";
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	background: #ee4266;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    }
    .our-team .pic img{
    	width: 100%;
    	height: auto;
    	border-radius: 50%;
    	transform: scale(1);
    	transition: all 0.9s ease 0s;
    }
    .our-team:hover .pic img{
    	box-shadow: 0 0 0 14px #f7f5ec;
    	transform: scale(0.7);
    }
    .our-team .team-content{ margin-bottom: 30px; }
    .our-team .title{
    	font-size: 22px;
    	font-weight: 700;
    	color: #4e5052;
    	letter-spacing: 1px;
    	text-transform: capitalize;
    	margin-bottom: 5px;
    }
    .our-team .post{
    	display: block;
    	font-size: 15px;
    	color: #4e5052;
    	text-transform:capitalize;
    }
    .our-team .social{
    	width: 100%;
    	padding: 0;
    	margin: 0;
    	background: #eb1768;
    	position: absolute;
    	bottom: -100px;
    	left: 0;
    	transition: all 0.5s ease 0s;
    }
    .our-team:hover .social{ bottom: 0; }
    .our-team .social li{ display: inline-block; }
    .our-team .social li a{
    	display: block;
    	padding: 10px;
    	font-size: 17px;
    	color: #fff;
    	transition: all 0.3s ease 0s;
    }
    .our-team .social li a:hover{
    	color: #eb1768;
    	background: #f7f5ec;
    }
    @media only screen and (max-width: 990px){
    	.our-team{ margin-bottom: 30px; }
    }
    
  • 相关下载