当前位置：首页 > 网页特效 > 动画效果

CSS3团队成员介绍卡片特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

CSS3团队成员介绍卡片特效

简介

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

```javascript
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
```
#####  HTML结构
该CSS3团队成员介绍卡片特效的基本HTML结构如下：

```javascript
<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">Angelia</h3>
                    <Span class="post">Web Developer</Span>
                </div>
                <ul class="social">
                    <li><a href="#" class="fa fa-facebook"></a></li>
                    <li><a href="#" class="fa fa-twitter"></a></li>
                    <li><a href="#" class="fa fa-google-plus"></a></li>
                    <li><a href="#" class="fa fa-linkedin"></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">Kristiana</h3>
                    <Span class="post">Web Designer</Span>
                </div>
                <ul class="social">
                    <li><a href="#" class="fa fa-facebook"></a></li>
                    <li><a href="#" class="fa fa-twitter"></a></li>
                    <li><a href="#" class="fa fa-google-plus"></a></li>
                    <li><a href="#" class="fa fa-linkedin"></a></li>
                </ul>
            </div>
        </div>
  ......
    </div>
</div>
```
#####  CSS样式
通过下面的CSS代码来对该团队成员介绍卡片特效进行美化，并添加鼠标hover卡片的动画效果。

```javascript
.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; }
}     
```

web299.com

CSS3团队成员介绍卡片特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果