首页 / CSS3 / 纯CSS3团队人员介绍动画特效实例
纯CSS3团队人员介绍动画特效实例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了纯CSS3团队人员介绍动画特效实例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3941字,纯文字阅读大概需要6分钟。
内容图文
简要教程
这是一款使用纯CSS3制作的团队人员介绍动画特效。该特效使用Bootstrap的网格系统来进行布局,在鼠标滑过每个团队成员的图片时,描述信息会有一些动画特效。
使用方法
在页面中引入bootstrap样式文件。
<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">
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>
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; } }
更多纯CSS3团队人员介绍动画特效实例相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的纯CSS3团队人员介绍动画特效实例全部内容,希望文章能够帮你解决纯CSS3团队人员介绍动画特效实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。