Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Mitglieder des Pure CSS3-Teams stellen Beispiele für Animations-Spezialeffekte vor

高洛峰
Freigeben: 2017-03-06 14:16:58
Original
1919 Leute haben es durchsucht
Kurzes Tutorial

Dies ist ein Animations-Spezialeffekt zur Vorstellung von Teammitgliedern, der mit reinem CSS3 erstellt wurde. Dieser Spezialeffekt nutzt das Rastersystem von Bootstrap für das Layout. Wenn die Maus über das Bild jedes Teammitglieds fährt, haben die Beschreibungsinformationen einige Animationseffekte.

So verwenden Sie

Fügen Sie Dateien im Bootstrap-Stil in die Seite ein.

<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">
Nach dem Login kopieren
HTML-Struktur

Die HTML-Struktur dieses Spezialeffekts ist wie folgt:

<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>
Nach dem Login kopieren
CSS-Stil

Fügen Sie das hinzu Für diesen Spezialeffekt folgen CSS-Stile.

.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;
    }
}
Nach dem Login kopieren

Weitere Artikel zu Beispielen für Animationsspezialeffekte, die von reinen CSS3-Teammitgliedern vorgestellt wurden, finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage