一款纯css3实现的tab选项卡_html/css_WEB-ITnose

今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下：

在线预览 源码下载

实现的代码。

html代码：

 
                                        Night Tabs                                                Typography                                                Grid Systen                                                License                        

                
                                        
                        Night Tabs
                    
                        Night Tabs (formerly TrueTabs) is an extensive CSS3                        Tabbed Content snippet. It started out small as a typical CSS Tabs snippet, but                        I have expanded it greatly. It offers many features, and can be easily modified                        to fit your needs. Some of the features include: Cross browser support, preset animations,                        colors, and layouts, a responsive grid system, and a typography set, among other                        things.
                
            
                        
                
                                        
                        Custom Fonts
                    
                        Open Sans Light
                    
                        FontAwesome
                    
                        
                            Paragraphs and Quotes
                        
                            Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,                            tristique tincidunt ipsum tincidunt a.                        
                        
                            
                                Maecenas tincidunt nunc est, nec pharetra odio porta ac. Morbi cursus lacinia neque,                                tristique tincidunt ipsum tincidunt a.
                        
                        
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada rutrum                            felis, quis imperdiet nisl finibus id. Etiam commodo vitae purus a lobortis. Donec                            lacinia dapibus metus nec feugiat. Integer blandit tellus vel dapibus efficitur.                            Nulla placerat sollicitudin laoreet. Maecenas fermentum eros diam, at blandit lectus                            volutpat ac.Proin ornare mauris dui, semper condimentum urna blandit non. Vestibulum                            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut                            scelerisque justo sit amet sem commodo, ac porta arcu auctor.
                        
                            Unordered Lists
                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit.                                

Nulla vitae lacus sed dui fringilla elementum eu id eros.
                                    
Vivamus euismod mauris sit amet iaculis porttitor.
                                    
Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
                                
                            
Nulla vitae lacus sed dui fringilla elementum eu id eros.
                            
Vivamus euismod mauris sit amet iaculis porttitor.
                            
Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
                        
                            Ordered Lists
                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit.                                

Nulla vitae lacus sed dui fringilla elementum eu id eros.
                                    
Vivamus euismod mauris sit amet iaculis porttitor.
                                    
Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
                                
                            
Nulla vitae lacus sed dui fringilla elementum eu id eros.
                            
Vivamus euismod mauris sit amet iaculis porttitor.
                            
Donec condimentum massa non elit lobortis, a ultrices ante vulputate.
                        
                            Typography Set                        
                
            
                        
                
                                        
                        
                            
                                HTML5
                            
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum                                nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod                                felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi                                pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum                                ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.                                Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus                                non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor                                blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor                                purus blandit, lacinia nibh quis, ultricies augue.
                        
                        
                            
                                CSS3
                            
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum                                nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod                                felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi                                pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum                                ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.                                Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus                                non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor                                blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor                                purus blandit, lacinia nibh quis, ultricies augue.
                        
                    
                    
                        
                            
                                NO JavaScript
                            
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante nisl, condimentum                                nec dolor viverra, dignissim convallis est. In commodo rhoncus augue, a euismod                                felis placerat ut. Ut ullamcorper libero tortor, ut semper lectus congue ut. Morbi                                pulvinar, nisi at pharetra scelerisque, nibh magna ornare augue, vel aliquet ipsum                                ante eu sem. Maecenas id est risus. Nulla facilisis dui molestie euismod mollis.                                Duis vehicula elementum justo in porta. Maecenas erat lectus, finibus vel lectus                                non, consequat ultricies dolor. Nunc ultricies quam in purus facilisis, porttitor                                blandit odio volutpat. Sed sed posuere lectus, sit amet rutrum est. Duis porttitor                                purus blandit, lacinia nibh quis, ultricies augue.
                        
                        
                            Night Tabs - CSS3 Tabbed Content                        
                    
                
            
                        
                
                                        
                        Night Tabs - v0.2.0
                    
                        Coded by Jason Shi under the MIT License.
                
            
        

css3代码：

/*------------------------------------*\    #RESET\*------------------------------------*/.night-tabs a,.night-tabs div,.night-tabs em,.night-tabs img,.night-tabs ul,.night-tabs label,.night-tabs li,.night-tabs ol,.night-tabs p,.night-tabs span,.night-tabs ul {    /* ->>> Structure >> Structure >> Structure >> Typography >> CSS3 >> Prevents double-click selection.  li {        /* Structure */        left: 0;        opacity: 0;        overflow: auto;        padding: 1em 1.5em; /* ->>> Spacing for content. >> Intensity of tab effects. .content1:checked~ul>.content1,.night-tabs>.content2:checked~ul>.content2,.night-tabs>.content3:checked~ul>.content3,.night-tabs>.content4:checked~ul>.content4 {    /* Structure */    opacity: 1;    visibility: visible;    /* CSS3 */    -webkit-transform: none;    -ms-transform: none;    transform: none}/*------------------------------------*\    #SLIDE EFFECTS\*------------------------------------*//* ->>> Slide Up  li {    -webkit-transform: translateY(30px);    -ms-transform: translateY(30px);    transform: translateY(30px)}/* ->>> Slide Down  li {    -webkit-transform: translateY(-30px);    -ms-transform: translateY(-30px);    transform: translateY(-30px)}/* ->>> Slide Left  li {    -webkit-transform: translateX(-30px);    -ms-transform: translateX(-30px);    transform: translateX(-30px)}/* ->>> Slide Right  li {    -webkit-transform: translateX(30px);    -ms-transform: translateX(30px);    transform: translateX(30px)}/* ->>> Slide Up + Left  li {    -webkit-transform: translate(-30px, -30px);    -ms-transform: translate(-30px, -30px);    transform: translate(-30px, -30px)}/* ->>> Slide Up + Right  li {    -webkit-transform: translate(30px, -30px);    -ms-transform: translate(30px, -30px);    transform: translate(30px, -30px)}/* ->>> Slide Down + Left  li {    -webkit-transform: translate(-30px, 30px);    -ms-transform: translate(-30px, 30px);    transform: translate(-30px, 30px)}/* ->>> Slide Down + Right  li {    -webkit-transform: translate(30px, 30px);    -ms-transform: translate(30px, 30px);    transform: translate(30px, 30px)}/*------------------------------------*\    #SLIDE EFFECTS\*------------------------------------*//* ->>> Rotate  ul > li {    -o-transform: rotate(10deg);    -ms-transform: rotate(10deg);    -moz-transform: rotate(10deg);    -webkit-transform: rotate(10deg)}.night-tabs-animation-rotate.night-tabs.night-tabs-position-vleft > ul > li,.night-tabs-animation-rotate.night-tabs.night-tabs-position-vright > ul > li {    -o-transform: rotate(-10deg);    -ms-transform: rotate(-10deg);    -moz-transform: rotate(-10deg);    -webkit-transform: rotate(-10deg)}/* ->>> Scale  ul > li {    -webkit-transform: scale(0.6, 0.6);    -ms-transform: scale(0.6, 0.6);    transform: scale(0.6, 0.6)}/* ->>> Flip  li {    -webkit-transform: rotateX(-90deg);    transform: rotateX(-90deg)}.night-tabs-animation-flip.night-tabs-position-vleft > .night-tabs-content > li {    -webkit-transform: rotateY(90deg);    transform: rotateY(90deg)}.night-tabs-animation-flip.night-tabs-position-vright > .night-tabs-content > li {    -webkit-transform: rotateY(-90deg);    transform: rotateY(-90deg)}/** * CONTENTS - layouts.css * * HORIZONTAL POSITIONS * Basic horizontal positions: top, left, right, and justify. * * VERTICAL POSITIONS * Basic vertical positions, vertical left and vertical right. * *//*------------------------------------*\    #HORIZONTAL POSITIONS\*------------------------------------*//* ->>> Left, Center, Right >> Justified  input:first-child + label {padding-left: 0}.night-tabs-position-justify2 > label {width: 50%}.night-tabs-position-justify3 > label {width: 33.33%}.night-tabs-position-justify4 > label {width: 25%}/*------------------------------------*\    #VERTICAL POSITIONS\*------------------------------------*//* ->>> General Styles  li,.night-tabs-position-vright .night-tabs-content > li {border-top: 0}.night-tabs-position-vleft > label,.night-tabs-position-vright > label {    clear: left;    display: block;    float: left;    margin-right: 0;    width: 25%}/* ->>> Vertical Left  .night-tabs-content {margin-left: 25%}/* ->>> Vertical Right  label {    clear: right;    float: right}.night-tabs-position-vright ul li { border-right: 1px solid #333}.night-tabs-position-vright > .night-tabs-content {margin-right: 25%}.night-tabs-position-vright .night-tabs-content > li {    -webkit-transform-origin: 100% 0%;    -ms-transform-origin: 100% 0%;    transform-origin: 100% 0%}/** * CONTENTS - typography.css * * BASIC TYPOGRAPHY * Styles for headings,paragraphs, and links. * * EXTENDED TYPOGRAPHY * Styling for images, unordered and ordered lists, and utility classes. * * GRID SYSTEM * Basic 12 fluid column grid system with offset support. * *//*------------------------------------*\    #BASIC TYPOGRAPHY\*------------------------------------*//* ->>> Headings >> Paragraphs >> Links >> FontAwesome >> Images >> Lists >> Utility >> Micro-Clearfix >> Basic Structure >> Grid System Config >> Default (Gray/Grey) >> Blue >> Red >> Green >> Purple >> Orange >> Yellow >> Pink >> Brown >> Teal >> Turquoise  label {        display: block;        float: none;        width: 100%;        padding-right: 0;        padding-left: 0;        text-align: left;        margin: 0    }    .night-tabs > .night-tabs-content {        margin-top: 0;        margin-right: 0;        margin-left: 0    }    .night-tabs > .night-tabs-content > li {        -webkit-transform-origin: 50% 0%;        -ms-transform-origin: 50% 0%;        transform-origin: 50% 0%    }    .night-tabs.night-tabs-animation-flip > ul > li {        -webkit-transform: rotateX(-90deg);        transform: rotateX(-90deg)    }}        body {            background: #111;            margin-top: 2em        }