我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力
今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候,右侧内容以动画的形式展示。效果图如下:
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
- <divclass="night-tabsnight-tabs-color-defaultnight-tabs-animation-slide-rightnight-tabs-position-vleft">
- <!--Tab1-->
- <inputtype="radio"name="night-tabs"checked=""id="tab1"class="content1">
- <!--Checked=Tabshown-->
- <labelfor="tab1">
- <!--Modifyiconandname-->
- <span><span><emclass="fafa-home"></em>NightTabs</span></span>
- </label>
- <!--Tab2-->
- <inputtype="radio"name="night-tabs"id="tab2"class="content2">
- <labelfor="tab2">
- <!--Modifyiconandname-->
- <span><span><emclass="fafa-font"></em>Typography</span></span>
- </label>
- <!--Tab3-->
- <inputtype="radio"name="night-tabs"id="tab3"class="content3">
- <labelfor="tab3">
- <!--Modifyiconandname-->
- <span><span><emclass="fafa-list"></em>GridSysten</span></span>
- </label>
- <!--Tab4-->
- <inputtype="radio"name="night-tabs"id="tab4"class="content4">
- <labelfor="tab4">
- <!--Modifyiconandname-->
- <span><span><emclass="fafa-legal"></em>License</span></span>
- </label>
- <!--Content-->
- <ulclass="night-tabs-content">
- <!--Tab1-->
- <liclass="content1">
- <divclass="content-1-content">
- <!--Contentgoeshere-->
- <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>
- <!--Tab2-->
- <liclass="content2">
- <divclass="content-2-content">
- <!--Contentgoeshere-->
- <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>
- <!--Tab3-->
- <liclass="content3">
- <divclass="content-3-content">
- <!--Contentgoeshere-->
- <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>
- <!--Tab4-->
- <liclass="content4">
- <divclass="content-4-content">
- <!--Contentgoeshere-->
- <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
- }
以上就是一款纯css3如何实现的tab选项卡的实列好代码教程。幸福不是在于我们多么努力的去争取是在于我们多么努力的去珍惜!更多关于一款纯css3如何实现的tab选项卡的实列好代码教程请关注haodaima.com其它相关文章!