纯CSS3团队人员介绍动画特效实例
Mar 06, 2017 pm 02:16 PM简要教程
这是一款使用纯CSS3制作的团队人员介绍动画特效。该特效使用Bootstrap的网格系统来进行布局,在鼠标滑过每个团队成员的图片时,描述信息会有一些动画特效。
使用方法
在页面中引入bootstrap样式文件。
<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">
Salin selepas log masuk
HTML结构
该特效的HTML结构如下:
<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>
Salin selepas log masuk
CSS样式
为该特效添加如下的CSS样式。
.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; } }
Salin selepas log masuk
更多纯CSS3团队人员介绍动画特效实例相关文章请关注PHP中文网!
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD

Alat panas Tag

Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu
By DDD

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Buat borang hubungan JavaScript dengan rangka kerja pintar

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)
