Pure CSS3 team members introduce animation special effects examples-CSS Tutorial-php.cn

Pure CSS3 team members introduce animation special effects examples

高洛峰

Release： 2017-03-06 14:16:58

Original

1864 people have browsed it

Brief tutorial

This is a team member introduction animation special effect produced using pure CSS3. This special effect uses Bootstrap's grid system for layout. When the mouse slides over the picture of each team member, the description information will have some animation effects.

Usage method

Introduce bootstrap style files into the page.

<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">

Copy after login

HTML structure

The HTML structure of this special effect is as follows:

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <img src="images/img-1.jpg" alt="">
                <div class="team-content">
                    <h3 class="title">Williamson</h3>
                    <span class="post">web developer</span>
                    <ul class="social-links">
                        <li><a href="#"><i class="fa fa-facebook"></i> </a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i> </a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i> </a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
  
        <div class="col-md-3 col-sm-6">
            <div class="our-team">
                <img src="images/img-2.jpg" alt="">
                <div class="team-content">
                    <h3 class="title">kristina</h3>
                    <span class="post">Web Designer</span>
                    <ul class="social-links">
                        <li><a href="#"><i class="fa fa-facebook"></i> </a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i> </a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i> </a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i> </a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Copy after login

CSS style

Add the following CSS style to this special effect.

.our-team{
    text-align: center;
    overflow: hidden;
    position: relative;
}
.our-team img{
    width: 100%;
    height: auto;
}
.our-team .team-content{
    width: 100%;
    background: #3f2b4f;
    color: #fff;
    padding: 15px 0 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.our-team:hover .team-content{
    padding-bottom: 40px;
}
.our-team .team-content:before,
.our-team .team-content:after{
    content: "";
    width: 60%;
    height: 38px;
    background: #3f2b4f;
    position: absolute;
    top: -18px;
    transform: rotate(15deg);
    z-index: -1;
}
.our-team .team-content:before{
    left: -3%;
}
.our-team .team-content:after{
    right: -3%;
    transform: rotate(-15deg);
}
.our-team .title{
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 7px 0;
    position: relative;
}
.our-team .title:before,
.our-team .title:after{
    content: "";
    width: 7px;
    height: 93px;
    background: #ff5543;
    position: absolute;
    top: -78px;
    z-index: -2;
    transform: rotate(-74deg);
}
.our-team .title:before{
    left: 32%;
}
.our-team .title:after{
    right: 32%;
    transform: rotate(74deg);
}
.our-team .post{
    display: block;
    font-size: 13px;
    text-transform: capitalize;
    margin-bottom: 8px;
}
.our-team .social-links{
    list-style: none;
    padding: 0 0 15px 0;
    margin: 0;
    position: absolute;
    bottom: -40px;
    right: 0;
    left: 0;
    transition: all 0.5s ease 0s;
}
.our-team:hover .social-links{
    bottom: 0;
}
.our-team .social-links li{
    display: inline-block;
}
.our-team .social-links li a{
    display: block;
    font-size: 16px;
    color: #aad6e1;
    margin-right: 6px;
    transition: all 0.5s ease 0s;
}
.our-team .social-links li:last-child a{
    margin-right: 0;
}
.our-team .social-links li a:hover{
    color: #ff5543;
}
@media only screen and (max-width: 990px){
    .our-team{ margin-bottom: 30px; }
    .our-team .team-content:before,
    .our-team .team-content:after{
        height: 50px;
        top: -24px;
    }
    .our-team .title:before,
    .our-team .title:after{
        top: -85px;
        height: 102px;
    }
    .our-team .title:before{
        left: 35%;
    }
    .our-team .title:after{
        right: 35%;
    }
}
@media only screen and (max-width: 767px){
    .our-team .team-content:before,
    .our-team .team-content:after{
        height: 75px;
    }
    .our-team .team-content:before{
        transform: rotate(8deg);
    }
    .our-team .team-content:after{
        transform: rotate(-8deg);
    }
    .our-team .title:before,
    .our-team .title:after{
        width: 10px;
        top: -78px;
        height: 102px;
    }
    .our-team .title:before{
        left: 42.5%;
        transform: rotate(-82deg);
    }
    .our-team .title:after{
        right: 42.5%;
        transform: rotate(82deg);
    }
}
@media only screen and (max-width: 480px){
    .our-team .title:before,
    .our-team .title:after{
        top: -83px;
    }
}

Copy after login

For more articles related to animation special effects examples introduced by pure CSS3 team members, please pay attention to the PHP Chinese website!