jquery和CSS3半透明垂直Accordion特效

这是一款jquery和CSS3半透明垂直Accordion特效。该Accordion基于bootstrap手风琴插件，通过简单的CSS样式，来对其进行美化。

预览 下载

使用方法

在页面中引入下面的文件。

HTML结构

< div class="container">
    < div class="row">
        < div class="col-md-offset-3 col-md-6">
            < div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                < div class="panel panel-default">
                    < div class="panel-heading" role="tab" id="headingOne">
                        < h4 class="panel-title">
                            < a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Section 1
                            
                        
                    
                    < div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        < div class="panel-body">
                            < p >Lorem ipsum dolor sit amet,... 
                        
                    
                

                < div class="panel panel-default">
                    < div class="panel-heading" role="tab" id="headingTwo">
                        < h4 class="panel-title">
                            < a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Section 2
                            
                        
                    
                    < div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        < div class="panel-body">
                            < p >Lorem ipsum dolor sit amet,...
                        
                    
                

                < div class="panel panel-default">
                    < div class="panel-heading" role="tab" id="headingThree">
                        < h4 class="panel-title">
                            < a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Section 3
                            
                        
                    
                    < div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        < div class="panel-body">
                            < p >Lorem ipsum dolor sit amet, ...
                        
                    
                
            
        
    

CSS样式

a:hover,a:focus{
        text-decoration :  none ;
        outline :  none ;
    }
    #acc ordion .panel{
        border :  none ;
        border-radius:  5px ;
        box-shadow:  none ;
        margin-bottom :  10px ;
        background :  transparent ;
    }
    #acc ordion .panel-heading{
        padding :  0 ;
        border :  none ;
        border-radius:  5px ;
        background :  transparent ;
        position :  relative ;
    }
    #acc ordion .panel-title a{
        display :  block ;
        padding :  20px 30px ;
        margin :  0 ;
        background : rgba( 0 , 0 , 0 , 0.4 );
        font-size :  17px ;
        font-weight :  bold ;
        color :  #fff ;
        text-transform :  uppercase ;
        letter-spacing :  1px ;
        border :  none ;
        border-radius:  5px ;
        position :  relative ;
    }
    #acc ordion .panel-title a.collapsed{  border :  none ; }
    #acc ordion .panel-title a:before,
    #acc ordion .panel-title a.collapsed:before{
        content :  "\f107" ;
        font-family :  "Font Awesome 5 Free" ;
        width :  30px ;
        height :  30px ;
        line-height :  27px ;
        text-align :  center ;
        font-size :  25px ;
        font-weight :  900 ;
        color :  #fff ;
        position :  absolute ;
        top :  15px ;
        right :  30px ;
        transform: rotate( 180 deg);
        transition:  all . 4 s cubic-bezier( 0.080 ,  1.090 ,  0.320 ,  1.275 );
    }
    #acc ordion .panel-title a.collapsed:before{
        color : rgba( 255 , 255 , 255 , 0.5 );
        transform: rotate( 0 deg);
    }
    #acc ordion .panel-body{
        padding :  20px 30px ;
        background : rgba( 0 , 0 , 0 , 0.1 );
        font-size :  15px ;
        color :  #fff ;
        line-height :  28px ;
        letter-spacing :  1px ;
        border-top :  none ;
        border-radius:  5px ;
    }