Les membres de l'équipe Pure CSS3 présentent des exemples d'effets spéciaux d'animation

Bref tutoriel

Il s'agit d'un effet spécial d'animation d'introduction des membres de l'équipe réalisé en CSS3 pur. Cet effet spécial utilise le système de grille de Bootstrap pour la mise en page. Lorsque la souris glisse sur l'image de chaque membre de l'équipe, les informations de description auront des effets d'animation.

Comment utiliser

Introduire des fichiers de style bootstrap dans la page.

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

Structure HTML

La structure HTML de cet effet spécial est la suivante :

<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>

Style CSS

Ajouter le suivant pour ces styles CSS d’effets spéciaux.

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

Pour plus d'articles liés aux exemples d'effets spéciaux d'animation introduits par les membres de l'équipe CSS3 pure, veuillez faire attention au site Web PHP chinois !