今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="night-tabsnight-tabs-color-defaultnight-tabs-animation-slide-rightnight-tabs-position-vleft"> <> <inputtype="radio"name="night-tabs"checked=""id="tab1"class="content1"> <> <labelfor="tab1"> <> <span><span><emclass="fafa-home"></em>NightTabs</span></span> </label> <> <inputtype="radio"name="night-tabs"id="tab2"class="content2"> <labelfor="tab2"> <> <span><span><emclass="fafa-font"></em>Typography</span></span> </label> <> <inputtype="radio"name="night-tabs"id="tab3"class="content3"> <labelfor="tab3"> <> <span><span><emclass="fafa-list"></em>GridSysten</span></span> </label> <> <inputtype="radio"name="night-tabs"id="tab4"class="content4"> <labelfor="tab4"> <> <span><span><emclass="fafa-legal"></em>License</span></span> </label> <> <ulclass="night-tabs-content"> <> <liclass="content1"> <divclass="content-1-content"> <> <h1class="h1"> NightTabs</h1> <p> <spanclass="dropcap">N</span>ightTabs(formerlyTrueTabs)isanextensiveCSS3 TabbedContentsnippet.ItstartedoutsmallasatypicalCSSTabssnippet,but Ihaveexpandeditgreatly.Itoffersmanyfeatures,andcanbeeasilymodified tofityourneeds.Someofthefeaturesinclude:Crossbrowsersupport,presetanimations, colors,andlayouts,aresponsivegridsystem,andatypographyset,amongother things.</p> </div> </li> <> <liclass="content2"> <divclass="content-2-content"> <> <h1class="h1"> CustomFonts</h1> <h2class="h2"> OpenSansLight</h2> <h3class="h3"> <emclass="fafa-check"></em>FontAwesome</h3> <p> <h2class="h2"> ParagraphsandQuotes</h2> <blockquoteclass="blockquote"> Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque, tristiquetinciduntipsumtincidunta. </blockquote> <divclass="well"> <p> Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque, tristiquetinciduntipsumtincidunta.</p> </div> <p> Loremipsumdolorsitamet,consecteturadipiscingelit.Donecmalesuadarutrum felis,quisimperdietnislfinibusid.Etiamcommodovitaepurusalobortis.Donec laciniadapibusmetusnecfeugiat.Integerblandittellusveldapibusefficitur. Nullaplaceratsollicitudinlaoreet.Maecenasfermentumerosdiam,atblanditlectus volutpatac.Proinornaremaurisdui,sempercondimentumurnablanditnon.Vestibulum anteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Ut scelerisquejustositametsemcommodo,acportaarcuauctor.</p> <h3class="h3"> UnorderedLists</h3> <ulclass="night-tabs-unordered-list"> <li>Loremipsumdolorsitamet,consecteturadipiscingelit. <ulclass="night-tabs-unordered-list"> <li>Nullavitaelacussedduifringillaelementumeuideros.</li> <li>Vivamuseuismodmaurissitametiaculisporttitor.</li> <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li> </ul> </li> <li>Nullavitaelacussedduifringillaelementumeuideros.</li> <li>Vivamuseuismodmaurissitametiaculisporttitor.</li> <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li> </ul> <h3class="h3"> OrderedLists</h3> <olclass="night-tabs-ordered-list"> <li>Loremipsumdolorsitamet,consecteturadipiscingelit. <olclass="night-tabs-ordered-list"> <li>Nullavitaelacussedduifringillaelementumeuideros.</li> <li>Vivamuseuismodmaurissitametiaculisporttitor.</li> <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li> </ol> </li> <li>Nullavitaelacussedduifringillaelementumeuideros.</li> <li>Vivamuseuismodmaurissitametiaculisporttitor.</li> <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li> </ol> <divclass="text-right"> <em>TypographySet</em> </div> </div> </li> <> <liclass="content3"> <divclass="content-3-content"> <> <divclass="grid-row"> <divclass="grid-columngrid-column-6"> <h2class="h2"> HTML5</h2> <p> Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor purusblandit,lacinianibhquis,ultriciesaugue.</p> </div> <divclass="grid-columngrid-column-6"> <h2class="h2"> CSS3</h2> <p> Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor purusblandit,lacinianibhquis,ultriciesaugue.</p> </div> </div> <divclass="grid-row"> <divclass="grid-columngrid-column-12"> <h2class="h2"> NOJavaScript</h2> <p> Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor purusblandit,lacinianibhquis,ultriciesaugue.</p> </div> <divclass="text-right"> <em>NightTabs-CSS3TabbedContent</em> </div> </div> </div> </li> <> <liclass="content4"> <divclass="content-4-content"> <> <h1class="h1"> NightTabs-v0.2.0</h1> <p> CodedbyJasonShiundertheMITLicense.</p> </div> </li> </ul> </div>
css3代码：
CSS Code复制内容到剪贴板 /*------------------------------------* #RESET *------------------------------------*/ .night-tabsa, .night-tabsdiv, .night-tabsem, .night-tabsimg, .night-tabsul, .night-tabslabel, .night-tabsli, .night-tabsol, .night-tabsp, .night-tabsspan, .night-tabsul{ /*->>>Structure<<<-*/ border:0; margin:0; padding:0; position:relative; box-sizing:border-box/*CSS3*/ } /*------------------------------------* #TABLABELS *------------------------------------*/ .night-tabs{ /*->>>Structure<<<-*/ margin:0auto;/*CenterNightTabs;optional.*/ width:70%;/*Definewidth.*/ font:3000px/1.5 "OpenSans","HelveticaNeue",Helvetica,Arial,sans-serif;/*Typography*/ color:#ecf0f1/*Colors*/ } .night-tabsinput{display:none}/*HideCheckbox.*/ .night-tabsinput:checked+label{cursor:default}/*Setcursortype.*/ .night-tabslabel{ /*->>>Structure<<<-*/ display:inline-block; z-index:1; border-bottom:2pxsolid#353535; border-right:1pxsolid#444; border-left:1pxsolid#222; /*->>>Typography<<<-*/ cursor:pointer; font-size:18px; line-height:40px; text-align:left; /*->>>CSS3<<<-*/ -webkit-user-select:none;/*->>>Preventsdouble-clickselection.<<<-*/ -moz-user-select:none; -ms-user-select:none } .night-tabslabelspan{ display:block; padding:.2em; background:#404040 } .night-tabslabelspanspan{ /*Structure*/ border:2pxsolidtransparent; padding:01em; /*CSS3*/ -webkit-transition:background.4s; transition:background.4s } /*------------------------------------* #TABCONTENT *------------------------------------*/ .night-tabs.night-tabs-content{ display:block;/*Structure*/ font-size:18px/*Typography*/ } .night-tabs.night-tabs-content>li{ /*Structure*/ left:0; opacity:0; overflow:auto; padding:1em1.5em;/*->>>Spacingforcontent.<<<-*/ position:absolute; top:0; visibility:hidden; width:100%; background:#404040;/*Colors*/ /*CSS3*/ -webkit-transform-origin:00; -ms-transform-origin:00; transform-origin:00; -webkit-transition:all.8s.1s;/*->>>Intensityoftabeffects.<<<-*/ transition:all.8s.1s } @charset"UTF-8"; /** *CONTENTS-effects.css * *GENERALSTYLES *Setupfortabeffects. * *SLIDEEFFECTS *Basicslideeffectsfromdifferentdirections. * *ADVANCEDEFFECTS *Advancedeffects(scale,rotate,flip) * */ /*------------------------------------* #GENERALSTYLES *------------------------------------*/ .night-tabs>.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 } /*------------------------------------* #SLIDEEFFECTS *------------------------------------*/ /*->>>SlideUp<<<-*/ .night-tabs-animation-slide-up.night-tabs-content>li{ -webkit-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px) } /*->>>SlideDown<<<-*/ .night-tabs-slide-down.night-tabs-content>li{ -webkit-transform:translateY(-30px); -ms-transform:translateY(-30px); transform:translateY(-30px) } /*->>>SlideLeft<<<-*/ .night-tabs-animation-slide-left.night-tabs-content>li{ -webkit-transform:translateX(-30px); -ms-transform:translateX(-30px); transform:translateX(-30px) } /*->>>SlideRight<<<-*/ .night-tabs-animation-slide-rightright.night-tabs-content>li{ -webkit-transform:translateX(30px); -ms-transform:translateX(30px); transform:translateX(30px) } /*->>>SlideUp+Left<<<-*/ .night-tabs-slide-up-left.night-tabs-content>li{ -webkit-transform:translate(-30px,-30px); -ms-transform:translate(-30px,-30px); transform:translate(-30px,-30px) } /*->>>SlideUp+Right<<<-*/ .night-tabs-animation-slide-up-rightright.night-tabs-content>li{ -webkit-transform:translate(30px,-30px); -ms-transform:translate(30px,-30px); transform:translate(30px,-30px) } /*->>>SlideDown+Left<<<-*/ .night-tabs-animation-slide-down-left.night-tabs-content>li{ -webkit-transform:translate(-30px,30px); -ms-transform:translate(-30px,30px); transform:translate(-30px,30px) } /*->>>SlideDown+Right<<<-*/ .night-tabs-animation-slide-down-rightright.night-tabs-content>li{ -webkit-transform:translate(30px,30px); -ms-transform:translate(30px,30px); transform:translate(30px,30px) } /*------------------------------------* #SLIDEEFFECTS *------------------------------------*/ /*->>>Rotate<<<-*/ .night-tabs-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<<<-*/ .night-tabs-animation-scale>ul>li{ -webkit-transform:scale(0.6,0.6); -ms-transform:scale(0.6,0.6); transform:scale(0.6,0.6) } /*->>>Flip<<<-*/ .night-tabs-animation-flip.night-tabs-content{ -webkit-perspective:2000px; perspective:2000px; -webkit-perspective-origin:50%50%; perspective-origin:50%50% } .night-tabs-animation-flip.night-tabs-content>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 * *HORIZONTALPOSITIONS *Basichorizontalpositions:top,left,right,andjustify. * *VERTICALPOSITIONS *Basicverticalpositions,verticalleftandverticalright. * */ /*------------------------------------* #HORIZONTALPOSITIONS *------------------------------------*/ /*->>>Left,Center,Right<<<-*/ .night-tabs-position-leftlabel, .night-tabs-position-centerlabel, .night-tabs-position-rightrightlabel{width:auto} .night-tabs-position-left{text-align:left} .night-tabs-position-center{text-align:center} .night-tabs-position-rightright{text-align:rightright} /*->>>Justified<<<-*/ .night-tabs-position-justify>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%} /*------------------------------------* #VERTICALPOSITIONS *------------------------------------*/ /*->>>GeneralStyles<<<-*/ .night-tabs-position-vleft.night-tabs-content>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% } /*->>>VerticalLeft<<<-*/ .night-tabs-position-vleftlabel{border-right:2pxsolid#333} .night-tabs-position-vleft>.night-tabs-content{margin-left:25%} /*->>>VerticalRight<<<-*/ .night-tabs-position-vright>label{ clear:rightright; float:rightright } .night-tabs-position-vrightulli{border-right:1pxsolid#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 * *BASICTYPOGRAPHY *Stylesforheadings,paragraphs,andlinks. * *EXTENDEDTYPOGRAPHY *Stylingforimages,unorderedandorderedlists,andutilityclasses. * *GRIDSYSTEM *Basic12fluidcolumngridsystemwithoffsetsupport. * */ /*------------------------------------* #BASICTYPOGRAPHY *------------------------------------*/ /*->>>Headings<<<-*/ h1,h2,h3{margin:0;padding:0} .night-tabs.night-tabs-contentli.h1, .night-tabs.night-tabs-contentli.h2, .night-tabs.night-tabs-contentli.h3{ font-weight:300; line-height:1.5 } .night-tabs.night-tabs-contentli.h1{font-size:3em} .night-tabs.night-tabs-contentli.h2{font-size:2.2em} .night-tabs.night-tabs-contentli.h3{font-size:1.4em} /*->>>Paragraphs<<<-*/ .night-tabs.night-tabs-contentlip{ margin:.5em0; font-size:1em } /*->>>Links<<<-*/ .night-tabs.night-tabs-contentlia{color:#ecf0f1} .night-tabs.night-tabs-contentlia:hover, .night-tabs.night-tabs-contentlia:focus{text-decoration:none} /*->>>FontAwesome<<<-*/ .night-tabs.fa{margin-right:.5em} /*------------------------------------* #EXTENDEDTYPOGRAPHY *------------------------------------*/ /*->>>Images<<<-*/ .night-tabs.night-tabs-contentliimg{ max-width:100%; height:auto } /*->>>Lists<<<-*/ .night-tabs.night-tabs-ordered-list, .night-tabs.night-tabs-unordered-list{ margin-top:.3em; padding-left:2.5em } .night-tabs.night-tabs-ordered-list{list-style:decimal} .night-tabs.night-tabs-unordered-list{list-style:disc} /*->>>Utility<<<-*/ /*Positioning*/ .text-center{text-align:center} .text-left{text-align:left} .text-rightright{text-align:rightright} .pull-left{float:left} .pull-rightright{float:rightright} /*Preformatted*/ .dropcap{ font-family:"Sanchez",Rockwell,slab-serif; float:left; font-size:5em; line-height:.9; } .blockquote{ margin:1em; padding:0001em; border-left:3pxsolid#ecf0f1 } .well{ background:#555; padding:1em!important } /*------------------------------------* #GRIDSYSTEM *------------------------------------*/ /*->>>Micro-Clearfix<<<-*/ .night-tabs.grid-row:after{ content:''; display:table; clear:both } /*->>>BasicStructure<<<-*/ .night-tabs.grid-row{margin-top:1em} .night-tabs.grid-row:first-child{margin-top:0} .night-tabs.grid-column{ display:block; float:left; width:100%; margin-left:2% } .night-tabs.grid-column:first-child{margin-left:0} /*->>>GridSystemConfig<<<-*/ .night-tabs.grid-column-1{width:6.5%} .night-tabs.grid-column-2{width:15%} .night-tabs.grid-column-3{width:23.5%} .night-tabs.grid-column-4{width:32%} .night-tabs.grid-column-5{width:40.5%} .night-tabs.grid-column-6{width:49%} .night-tabs.grid-column-7{width:57.5%} .night-tabs.grid-column-8{width:66%} .night-tabs.grid-column-9{width:74.5%} .night-tabs.grid-column-10{width:83%} .night-tabs.grid-column-11{width:91.5%} .night-tabs.grid-column-offset-1, .night-tabs.grid-column-offset-1:first-child{margin-left:8.5%} .night-tabs.grid-column-offset-2, .night-tabs.grid-column-offset-2:first-child{margin-left:17%} .night-tabs.grid-column-offset-3, .night-tabs.grid-column-offset-3:first-child{margin-left:25.5%} .night-tabs.grid-column-offset-4, .night-tabs.grid-column-offset-4:first-child{margin-left:34%} .night-tabs.grid-column-offset-5, .night-tabs.grid-column-offset-5:first-child{margin-left:42.5%} .night-tabs.grid-column-offset-6, .night-tabs.grid-column-offset-6:first-child{margin-left:51%} .night-tabs.grid-column-offset-7, .night-tabs.grid-column-offset-7:first-child{margin-left:59.5%} .night-tabs.grid-column-offset-8, .night-tabs.grid-column-offset-8:first-child{margin-left:68%} .night-tabs.grid-column-offset-9, .night-tabs.grid-column-offset-9:first-child{margin-left:76.5%} .night-tabs.grid-column-offset-10,.night-tabs.grid-column-offset-10:first-child{margin-left:85%} .night-tabs.grid-column-offset-11,.night-tabs.grid-column-offset-11:first-child{margin-left:93.5%} /** *CONTENTS-colors.css * *COLORS *Default(Gray/Grey),Red,Blue,Green,Purple,Orange,Yellow,Pink,Brown,Teal,Turquoise. * */ /*------------------------------------* #COLORS *------------------------------------*/ /*->>>Default(Gray/Grey)<<<-*/ .night-tabslabel:hoverspanspan, .night-tabsinput:checked+labelspanspan, .night-tabs-color-defaultlabel:hoverspanspan, .night-tabs-color-defaultinput:checked+labelspanspan{background:#6c7a89} /*->>>Blue<<<-*/ .night-tabs-color-bluelabel:hoverspanspan, .night-tabs-color-blueinput:checked+labelspanspan{background:#1e8bc3} /*->>>Red<<<-*/ .night-tabs-color-redlabel:hoverspanspan, .night-tabs-color-redinput:checked+labelspanspan{background:#ef4836} /*->>>Green<<<-*/ .night-tabs-color-greenlabel:hoverspanspan, .night-tabs-color-greeninput:checked+labelspanspan{background:#27ae60} /*->>>Purple<<<-*/ .night-tabs-color-purplelabel:hoverspanspan, .night-tabs-color-purpleinput:checked+labelspanspan{background:#9b59b6} /*->>>Orange<<<-*/ .night-tabs-color-orangelabel:hoverspanspan, .night-tabs-color-orangeinput:checked+labelspanspan{background:#F9690E} /*->>>Yellow<<<-*/ .night-tabs-color-yellowlabel:hoverspanspan, .night-tabs-color-yellowinput:checked+labelspanspan{background:#a8880a} /*->>>Pink<<<-*/ .night-tabs-color-pinklabel:hoverspanspan, .night-tabs-color-pinkinput:checked+labelspanspan{background:#dB0a5b} /*->>>Brown<<<-*/ .night-tabs-color-brownlabel:hoverspanspan, .night-tabs-color-browninput:checked+labelspanspan{background:#926239} /*->>>Teal<<<-*/ .night-tabs-color-teallabel:hoverspanspan, .night-tabs-color-tealinput:checked+labelspanspan{background:#008080} /*->>>Turquoise<<<-*/ .night-tabs-color-turquoiselabel:hoverspanspan, .night-tabs-color-turquoiseinput:checked+labelspanspan{background:#16a085} /** *CONTENTS-mobile.css * *RESPONSIVESTACKING *Tabsstackontopofeachotheronmobiledevices. * */ /*------------------------------------* #RESPONSIVESTACKING *------------------------------------*/ @mediascreenand(max-width:48em){ .night-tabs.grid-column, .night-tabs.grid-column:first-child{ float:none; width:100%; margin:1em000 } .night-tabs>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 }