<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    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  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  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  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  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; }
                      }
                      
                    • 相关下载
                    北京赛车玩法和赔率|官网_首页