手风琴

基于Bootstrap的垂直手风琴动画特效

创客主机

基于Bootstrap的垂直手风琴动画特效-创客云
这是一款基于 Bootstrap 的垂直手风琴特效。该垂直手风琴特效基于原生的 Bootstrap Accordion 组件来制作,通过 CSS3 来对它进行美化,效果美观大方。

HTML 结构

该垂直手风琴特效的基本 HTML 结构如下:

也想出现在这里?联系我们
WordPress 主题
  1. <div class="container">
  2.       <div class="row">
  3.           <div class="col-md-offset-3 col-md-6">
  4.               <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  5.                   <div class="panel panel-default">
  6.                       <div class="panel-heading" role="tab" id="headingOne">
  7.                           <h4 class="panel-title">
  8.                               <a role="button" data-toggle="collapse" data-parent="#accordion"
  9.                                 href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  10.                                   SECTION 1
  11.                               </a>
  12.                           </h4>
  13.                       </div>
  14.                       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
  15.                             aria-labelledby="headingOne">
  16.                           <div class="panel-body">
  17.                               <p>......</p>
  18.                           </div>
  19.                       </div>
  20.                   </div>
  21.                   ......
  22.               </div>
  23.           </div>
  24.       </div>
  25.   </div>

CSS 样式

该垂直手风琴特效的美化 CSS 样式如下:

  1. a:hover,a:focus{
  2.     text-decoration: none;
  3.     outline: none;
  4. }
  5. #accordion .panel{
  6.     border: none;
  7.     box-shadow: none;
  8.     border-radius: 0;
  9.     margin-bottom: -5px;
  10. }
  11. #accordion .panel-heading{
  12.     padding: 0;
  13.     border-radius: 0;
  14.     border: none;
  15.     text-align: center;
  16. }
  17. #accordion .panel-title a{
  18.     display: block;
  19.     padding: 25px 30px;
  20.     font-size: 16px;
  21.     font-weight: bold;
  22.     color: #fff;
  23.     background: #333;
  24.     border-bottom: 1px solid #4a4a4a;
  25.     position: relative;
  26.     transition: all 0.5s ease 0s;
  27. }
  28. #accordion .panel-title a:hover{
  29.     background: #4a4a4a;
  30. }
  31. #accordion .panel-title a:after,
  32. #accordion .panel-title a.collapsed:after{
  33.     content: "\f067";
  34.     font-family: FontAwesome;
  35.     font-size: 15px;
  36.     font-weight: 200;
  37.     position: absolute;
  38.     top: 25px;
  39.     left: 15px;
  40.     transform: rotate(135deg);
  41.     transition: all 0.5s ease 0s;
  42. }
  43. #accordion .panel-title a.collapsed:after{
  44.     transform: rotate(0deg);
  45. }
  46. #accordion .panel-body{
  47.     background: #167ea0;
  48.     padding: 0 0 0 40px;
  49.     border: none;
  50.     position: relative;
  51. }
  52. #accordion .panel-body p{
  53.     font-size: 14px;
  54.     color: #fff;
  55.     line-height: 25px;
  56.     background: #3296b7;
  57.     padding: 30px;
  58.     margin: 0;
  59. }
  60. #accordion .panel-collapse .panel-body p{
  61.     opacity: 0;
  62.     transform: scale(0.9);
  63.     transition: all 0.5s ease-in-out 0s;
  64. }
  65. #accordion .panel-collapse.in .panel-body p{
  66.     opacity: 1;
  67.     transform: scale(1);
  68. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!