一款纯css3如何实现的tab选项卡的实列好代码教程

我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

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

  实现的代码。

  html代码:

XML/HTML Code复制内容到剪贴板
  1. <divclass="night-tabsnight-tabs-color-defaultnight-tabs-animation-slide-rightnight-tabs-position-vleft">
  2. <!--Tab1-->
  3. <inputtype="radio"name="night-tabs"checked=""id="tab1"class="content1">
  4. <!--Checked=Tabshown-->
  5. <labelfor="tab1">
  6. <!--Modifyiconandname-->
  7. <span><span><emclass="fafa-home"></em>NightTabs</span></span>
  8. </label>
  9. <!--Tab2-->
  10. <inputtype="radio"name="night-tabs"id="tab2"class="content2">
  11. <labelfor="tab2">
  12. <!--Modifyiconandname-->
  13. <span><span><emclass="fafa-font"></em>Typography</span></span>
  14. </label>
  15. <!--Tab3-->
  16. <inputtype="radio"name="night-tabs"id="tab3"class="content3">
  17. <labelfor="tab3">
  18. <!--Modifyiconandname-->
  19. <span><span><emclass="fafa-list"></em>GridSysten</span></span>
  20. </label>
  21. <!--Tab4-->
  22. <inputtype="radio"name="night-tabs"id="tab4"class="content4">
  23. <labelfor="tab4">
  24. <!--Modifyiconandname-->
  25. <span><span><emclass="fafa-legal"></em>License</span></span>
  26. </label>
  27. <!--Content-->
  28. <ulclass="night-tabs-content">
  29. <!--Tab1-->
  30. <liclass="content1">
  31. <divclass="content-1-content">
  32. <!--Contentgoeshere-->
  33. <h1class="h1">
  34. NightTabs</h1>
  35. <p>
  36. <spanclass="dropcap">N</span>ightTabs(formerlyTrueTabs)isanextensiveCSS3
  37. TabbedContentsnippet.ItstartedoutsmallasatypicalCSSTabssnippet,but
  38. Ihaveexpandeditgreatly.Itoffersmanyfeatures,andcanbeeasilymodified
  39. tofityourneeds.Someofthefeaturesinclude:Crossbrowsersupport,presetanimations,
  40. colors,andlayouts,aresponsivegridsystem,andatypographyset,amongother
  41. things.</p>
  42. </div>
  43. </li>
  44. <!--Tab2-->
  45. <liclass="content2">
  46. <divclass="content-2-content">
  47. <!--Contentgoeshere-->
  48. <h1class="h1">
  49. CustomFonts</h1>
  50. <h2class="h2">
  51. OpenSansLight</h2>
  52. <h3class="h3">
  53. <emclass="fafa-check"></em>FontAwesome</h3>
  54. <p>
  55. <h2class="h2">
  56. ParagraphsandQuotes</h2>
  57. <blockquoteclass="blockquote">
  58. Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque,
  59. tristiquetinciduntipsumtincidunta.
  60. </blockquote>
  61. <divclass="well">
  62. <p>
  63. Maecenastinciduntnuncest,necpharetraodioportaac.Morbicursuslacinianeque,
  64. tristiquetinciduntipsumtincidunta.</p>
  65. </div>
  66. <p>
  67. Loremipsumdolorsitamet,consecteturadipiscingelit.Donecmalesuadarutrum
  68. felis,quisimperdietnislfinibusid.Etiamcommodovitaepurusalobortis.Donec
  69. laciniadapibusmetusnecfeugiat.Integerblandittellusveldapibusefficitur.
  70. Nullaplaceratsollicitudinlaoreet.Maecenasfermentumerosdiam,atblanditlectus
  71. volutpatac.Proinornaremaurisdui,sempercondimentumurnablanditnon.Vestibulum
  72. anteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCurae;Ut
  73. scelerisquejustositametsemcommodo,acportaarcuauctor.</p>
  74. <h3class="h3">
  75. UnorderedLists</h3>
  76. <ulclass="night-tabs-unordered-list">
  77. <li>Loremipsumdolorsitamet,consecteturadipiscingelit.
  78. <ulclass="night-tabs-unordered-list">
  79. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  80. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  81. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  82. </ul>
  83. </li>
  84. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  85. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  86. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  87. </ul>
  88. <h3class="h3">
  89. OrderedLists</h3>
  90. <olclass="night-tabs-ordered-list">
  91. <li>Loremipsumdolorsitamet,consecteturadipiscingelit.
  92. <olclass="night-tabs-ordered-list">
  93. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  94. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  95. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  96. </ol>
  97. </li>
  98. <li>Nullavitaelacussedduifringillaelementumeuideros.</li>
  99. <li>Vivamuseuismodmaurissitametiaculisporttitor.</li>
  100. <li>Doneccondimentummassanonelitlobortis,aultricesantevulputate.</li>
  101. </ol>
  102. <divclass="text-right">
  103. <em>TypographySet</em>
  104. </div>
  105. </div>
  106. </li>
  107. <!--Tab3-->
  108. <liclass="content3">
  109. <divclass="content-3-content">
  110. <!--Contentgoeshere-->
  111. <divclass="grid-row">
  112. <divclass="grid-columngrid-column-6">
  113. <h2class="h2">
  114. HTML5</h2>
  115. <p>
  116. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  117. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  118. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  119. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  120. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  121. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  122. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  123. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  124. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  125. </div>
  126. <divclass="grid-columngrid-column-6">
  127. <h2class="h2">
  128. CSS3</h2>
  129. <p>
  130. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  131. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  132. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  133. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  134. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  135. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  136. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  137. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  138. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  139. </div>
  140. </div>
  141. <divclass="grid-row">
  142. <divclass="grid-columngrid-column-12">
  143. <h2class="h2">
  144. NOJavaScript</h2>
  145. <p>
  146. Loremipsumdolorsitamet,consecteturadipiscingelit.Aliquamantenisl,condimentum
  147. necdolorviverra,dignissimconvallisest.Incommodorhoncusaugue,aeuismod
  148. felisplaceratut.Utullamcorperliberotortor,utsemperlectuscongueut.Morbi
  149. pulvinar,nisiatpharetrascelerisque,nibhmagnaornareaugue,velaliquetipsum
  150. anteeusem.Maecenasidestrisus.Nullafacilisisduimolestieeuismodmollis.
  151. Duisvehiculaelementumjustoinporta.Maecenaseratlectus,finibusvellectus
  152. non,consequatultriciesdolor.Nuncultriciesquaminpurusfacilisis,porttitor
  153. blanditodiovolutpat.Sedsedposuerelectus,sitametrutrumest.Duisporttitor
  154. purusblandit,lacinianibhquis,ultriciesaugue.</p>
  155. </div>
  156. <divclass="text-right">
  157. <em>NightTabs-CSS3TabbedContent</em>
  158. </div>
  159. </div>
  160. </div>
  161. </li>
  162. <!--Tab4-->
  163. <liclass="content4">
  164. <divclass="content-4-content">
  165. <!--Contentgoeshere-->
  166. <h1class="h1">
  167. NightTabs-v0.2.0</h1>
  168. <p>
  169. CodedbyJasonShiundertheMITLicense.</p>
  170. </div>
  171. </li>
  172. </ul>
  173. </div>

  css3代码:

CSS Code复制内容到剪贴板
  1. /*------------------------------------*\
  2. #RESET
  3. \*------------------------------------*/
  4. .night-tabsa,
  5. .night-tabsdiv,
  6. .night-tabsem,
  7. .night-tabsimg,
  8. .night-tabsul,
  9. .night-tabslabel,
  10. .night-tabsli,
  11. .night-tabsol,
  12. .night-tabsp,
  13. .night-tabsspan,
  14. .night-tabsul{
  15. /*->>>Structure<<<-*/
  16. border:0;
  17. margin:0;
  18. padding:0;
  19. position:relative;
  20. box-sizing:border-box/*CSS3*/
  21. }
  22. /*------------------------------------*\
  23. #TABLABELS
  24. \*------------------------------------*/
  25. .night-tabs{
  26. /*->>>Structure<<<-*/
  27. margin:0auto;/*CenterNightTabs;optional.*/
  28. width:70%;/*Definewidth.*/
  29. font:3000px/1.5
  30. "OpenSans","HelveticaNeue",Helvetica,Arial,sans-serif;/*Typography*/
  31. color:#ecf0f1/*Colors*/
  32. }
  33. .night-tabsinput{display:none}/*HideCheckbox.*/
  34. .night-tabsinput:checked+label{cursor:default}/*Setcursortype.*/
  35. .night-tabslabel{
  36. /*->>>Structure<<<-*/
  37. display:inline-block;
  38. z-index:1;
  39. border-bottom:2pxsolid#353535;
  40. border-right:1pxsolid#444;
  41. border-left:1pxsolid#222;
  42. /*->>>Typography<<<-*/
  43. cursor:pointer;
  44. font-size:18px;
  45. line-height:40px;
  46. text-align:left;
  47. /*->>>CSS3<<<-*/
  48. -webkit-user-select:none;/*->>>Preventsdouble-clickselection.<<<-*/
  49. -moz-user-select:none;
  50. -ms-user-select:none
  51. }
  52. .night-tabslabelspan{
  53. display:block;
  54. padding:.2em;
  55. background:#404040
  56. }
  57. .night-tabslabelspanspan{
  58. /*Structure*/
  59. border:2pxsolidtransparent;
  60. padding:01em;
  61. /*CSS3*/
  62. -webkit-transition:background.4s;
  63. transition:background.4s
  64. }
  65. /*------------------------------------*\
  66. #TABCONTENT
  67. \*------------------------------------*/
  68. .night-tabs.night-tabs-content{
  69. display:block;/*Structure*/
  70. font-size:18px/*Typography*/
  71. }
  72. .night-tabs.night-tabs-content>li{
  73. /*Structure*/
  74. left:0;
  75. opacity:0;
  76. overflow:auto;
  77. padding:1em1.5em;/*->>>Spacingforcontent.<<<-*/
  78. position:absolute;
  79. top:0;
  80. visibility:hidden;
  81. width:100%;
  82. background:#404040;/*Colors*/
  83. /*CSS3*/
  84. -webkit-transform-origin:00;
  85. -ms-transform-origin:00;
  86. transform-origin:00;
  87. -webkit-transition:all.8s.1s;/*->>>Intensityoftabeffects.<<<-*/
  88. transition:all.8s.1s
  89. }
  90. @charset"UTF-8";
  91. /**
  92. *CONTENTS-effects.css
  93. *
  94. *GENERALSTYLES
  95. *Setupfortabeffects.
  96. *
  97. *SLIDEEFFECTS
  98. *Basicslideeffectsfromdifferentdirections.
  99. *
  100. *ADVANCEDEFFECTS
  101. *Advancedeffects(scale,rotate,flip)
  102. *
  103. */
  104. /*------------------------------------*\
  105. #GENERALSTYLES
  106. \*------------------------------------*/
  107. .night-tabs>.content1:checked~ul>.content1,
  108. .night-tabs>.content2:checked~ul>.content2,
  109. .night-tabs>.content3:checked~ul>.content3,
  110. .night-tabs>.content4:checked~ul>.content4{
  111. /*Structure*/
  112. opacity:1;
  113. visibility:visible;
  114. /*CSS3*/
  115. -webkit-transform:none;
  116. -ms-transform:none;
  117. transform:none
  118. }
  119. /*------------------------------------*\
  120. #SLIDEEFFECTS
  121. \*------------------------------------*/
  122. /*->>>SlideUp<<<-*/
  123. .night-tabs-animation-slide-up.night-tabs-content>li{
  124. -webkit-transform:translateY(30px);
  125. -ms-transform:translateY(30px);
  126. transform:translateY(30px)
  127. }
  128. /*->>>SlideDown<<<-*/
  129. .night-tabs-slide-down.night-tabs-content>li{
  130. -webkit-transform:translateY(-30px);
  131. -ms-transform:translateY(-30px);
  132. transform:translateY(-30px)
  133. }
  134. /*->>>SlideLeft<<<-*/
  135. .night-tabs-animation-slide-left.night-tabs-content>li{
  136. -webkit-transform:translateX(-30px);
  137. -ms-transform:translateX(-30px);
  138. transform:translateX(-30px)
  139. }
  140. /*->>>SlideRight<<<-*/
  141. .night-tabs-animation-slide-rightright.night-tabs-content>li{
  142. -webkit-transform:translateX(30px);
  143. -ms-transform:translateX(30px);
  144. transform:translateX(30px)
  145. }
  146. /*->>>SlideUp+Left<<<-*/
  147. .night-tabs-slide-up-left.night-tabs-content>li{
  148. -webkit-transform:translate(-30px,-30px);
  149. -ms-transform:translate(-30px,-30px);
  150. transform:translate(-30px,-30px)
  151. }
  152. /*->>>SlideUp+Right<<<-*/
  153. .night-tabs-animation-slide-up-rightright.night-tabs-content>li{
  154. -webkit-transform:translate(30px,-30px);
  155. -ms-transform:translate(30px,-30px);
  156. transform:translate(30px,-30px)
  157. }
  158. /*->>>SlideDown+Left<<<-*/
  159. .night-tabs-animation-slide-down-left.night-tabs-content>li{
  160. -webkit-transform:translate(-30px,30px);
  161. -ms-transform:translate(-30px,30px);
  162. transform:translate(-30px,30px)
  163. }
  164. /*->>>SlideDown+Right<<<-*/
  165. .night-tabs-animation-slide-down-rightright.night-tabs-content>li{
  166. -webkit-transform:translate(30px,30px);
  167. -ms-transform:translate(30px,30px);
  168. transform:translate(30px,30px)
  169. }
  170. /*------------------------------------*\
  171. #SLIDEEFFECTS
  172. \*------------------------------------*/
  173. /*->>>Rotate<<<-*/
  174. .night-tabs-rotate>ul>li{
  175. -o-transform:rotate(10deg);
  176. -ms-transform:rotate(10deg);
  177. -moz-transform:rotate(10deg);
  178. -webkit-transform:rotate(10deg)
  179. }
  180. .night-tabs-animation-rotate.night-tabs.night-tabs-position-vleft>ul>li,
  181. .night-tabs-animation-rotate.night-tabs.night-tabs-position-vright>ul>li{
  182. -o-transform:rotate(-10deg);
  183. -ms-transform:rotate(-10deg);
  184. -moz-transform:rotate(-10deg);
  185. -webkit-transform:rotate(-10deg)
  186. }
  187. /*->>>Scale<<<-*/
  188. .night-tabs-animation-scale>ul>li{
  189. -webkit-transform:scale(0.6,0.6);
  190. -ms-transform:scale(0.6,0.6);
  191. transform:scale(0.6,0.6)
  192. }
  193. /*->>>Flip<<<-*/
  194. .night-tabs-animation-flip.night-tabs-content{
  195. -webkit-perspective:2000px;
  196. perspective:2000px;
  197. -webkit-perspective-origin:50%50%;
  198. perspective-origin:50%50%
  199. }
  200. .night-tabs-animation-flip.night-tabs-content>li{
  201. -webkit-transform:rotateX(-90deg);
  202. transform:rotateX(-90deg)
  203. }
  204. .night-tabs-animation-flip.night-tabs-position-vleft>.night-tabs-content>li{
  205. -webkit-transform:rotateY(90deg);
  206. transform:rotateY(90deg)
  207. }
  208. .night-tabs-animation-flip.night-tabs-position-vright>.night-tabs-content>li{
  209. -webkit-transform:rotateY(-90deg);
  210. transform:rotateY(-90deg)
  211. }
  212. /**
  213. *CONTENTS-layouts.css
  214. *
  215. *HORIZONTALPOSITIONS
  216. *Basichorizontalpositions:top,left,right,andjustify.
  217. *
  218. *VERTICALPOSITIONS
  219. *Basicverticalpositions,verticalleftandverticalright.
  220. *
  221. */
  222. /*------------------------------------*\
  223. #HORIZONTALPOSITIONS
  224. \*------------------------------------*/
  225. /*->>>Left,Center,Right<<<-*/
  226. .night-tabs-position-leftlabel,
  227. .night-tabs-position-centerlabel,
  228. .night-tabs-position-rightrightlabel{width:auto}
  229. .night-tabs-position-left{text-align:left}
  230. .night-tabs-position-center{text-align:center}
  231. .night-tabs-position-rightright{text-align:rightright}
  232. /*->>>Justified<<<-*/
  233. .night-tabs-position-justify>input:first-child+label{padding-left:0}
  234. .night-tabs-position-justify2>label{width:50%}
  235. .night-tabs-position-justify3>label{width:33.33%}
  236. .night-tabs-position-justify4>label{width:25%}
  237. /*------------------------------------*\
  238. #VERTICALPOSITIONS
  239. \*------------------------------------*/
  240. /*->>>GeneralStyles<<<-*/
  241. .night-tabs-position-vleft.night-tabs-content>li,
  242. .night-tabs-position-vright.night-tabs-content>li{border-top:0}
  243. .night-tabs-position-vleft>label,
  244. .night-tabs-position-vright>label{
  245. clear:left;
  246. display:block;
  247. float:left;
  248. margin-right:0;
  249. width:25%
  250. }
  251. /*->>>VerticalLeft<<<-*/
  252. .night-tabs-position-vleftlabel{border-right:2pxsolid#333}
  253. .night-tabs-position-vleft>.night-tabs-content{margin-left:25%}
  254. /*->>>VerticalRight<<<-*/
  255. .night-tabs-position-vright>label{
  256. clear:rightright;
  257. float:rightright
  258. }
  259. .night-tabs-position-vrightulli{border-right:1pxsolid#333}
  260. .night-tabs-position-vright>.night-tabs-content{margin-right:25%}
  261. .night-tabs-position-vright.night-tabs-content>li{
  262. -webkit-transform-origin:100%0%;
  263. -ms-transform-origin:100%0%;
  264. transform-origin:100%0%
  265. }
  266. /**
  267. *CONTENTS-typography.css
  268. *
  269. *BASICTYPOGRAPHY
  270. *Stylesforheadings,paragraphs,andlinks.
  271. *
  272. *EXTENDEDTYPOGRAPHY
  273. *Stylingforimages,unorderedandorderedlists,andutilityclasses.
  274. *
  275. *GRIDSYSTEM
  276. *Basic12fluidcolumngridsystemwithoffsetsupport.
  277. *
  278. */
  279. /*------------------------------------*\
  280. #BASICTYPOGRAPHY
  281. \*------------------------------------*/
  282. /*->>>Headings<<<-*/
  283. h1,h2,h3{margin:0;padding:0}
  284. .night-tabs.night-tabs-contentli.h1,
  285. .night-tabs.night-tabs-contentli.h2,
  286. .night-tabs.night-tabs-contentli.h3{
  287. font-weight:300;
  288. line-height:1.5
  289. }
  290. .night-tabs.night-tabs-contentli.h1{font-size:3em}
  291. .night-tabs.night-tabs-contentli.h2{font-size:2.2em}
  292. .night-tabs.night-tabs-contentli.h3{font-size:1.4em}
  293. /*->>>Paragraphs<<<-*/
  294. .night-tabs.night-tabs-contentlip{
  295. margin:.5em0;
  296. font-size:1em
  297. }
  298. /*->>>Links<<<-*/
  299. .night-tabs.night-tabs-contentlia{color:#ecf0f1}
  300. .night-tabs.night-tabs-contentlia:hover,
  301. .night-tabs.night-tabs-contentlia:focus{text-decoration:none}
  302. /*->>>FontAwesome<<<-*/
  303. .night-tabs.fa{margin-right:.5em}
  304. /*------------------------------------*\
  305. #EXTENDEDTYPOGRAPHY
  306. \*------------------------------------*/
  307. /*->>>Images<<<-*/
  308. .night-tabs.night-tabs-contentliimg{
  309. max-width:100%;
  310. height:auto
  311. }
  312. /*->>>Lists<<<-*/
  313. .night-tabs.night-tabs-ordered-list,
  314. .night-tabs.night-tabs-unordered-list{
  315. margin-top:.3em;
  316. padding-left:2.5em
  317. }
  318. .night-tabs.night-tabs-ordered-list{list-style:decimal}
  319. .night-tabs.night-tabs-unordered-list{list-style:disc}
  320. /*->>>Utility<<<-*/
  321. /*Positioning*/
  322. .text-center{text-align:center}
  323. .text-left{text-align:left}
  324. .text-rightright{text-align:rightright}
  325. .pull-left{float:left}
  326. .pull-rightright{float:rightright}
  327. /*Preformatted*/
  328. .dropcap{
  329. font-family:"Sanchez",Rockwell,slab-serif;
  330. float:left;
  331. font-size:5em;
  332. line-height:.9;
  333. }
  334. .blockquote{
  335. margin:1em;
  336. padding:0001em;
  337. border-left:3pxsolid#ecf0f1
  338. }
  339. .well{
  340. background:#555;
  341. padding:1em!important
  342. }
  343. /*------------------------------------*\
  344. #GRIDSYSTEM
  345. \*------------------------------------*/
  346. /*->>>Micro-Clearfix<<<-*/
  347. .night-tabs.grid-row:after{
  348. content:'';
  349. display:table;
  350. clear:both
  351. }
  352. /*->>>BasicStructure<<<-*/
  353. .night-tabs.grid-row{margin-top:1em}
  354. .night-tabs.grid-row:first-child{margin-top:0}
  355. .night-tabs.grid-column{
  356. display:block;
  357. float:left;
  358. width:100%;
  359. margin-left:2%
  360. }
  361. .night-tabs.grid-column:first-child{margin-left:0}
  362. /*->>>GridSystemConfig<<<-*/
  363. .night-tabs.grid-column-1{width:6.5%}
  364. .night-tabs.grid-column-2{width:15%}
  365. .night-tabs.grid-column-3{width:23.5%}
  366. .night-tabs.grid-column-4{width:32%}
  367. .night-tabs.grid-column-5{width:40.5%}
  368. .night-tabs.grid-column-6{width:49%}
  369. .night-tabs.grid-column-7{width:57.5%}
  370. .night-tabs.grid-column-8{width:66%}
  371. .night-tabs.grid-column-9{width:74.5%}
  372. .night-tabs.grid-column-10{width:83%}
  373. .night-tabs.grid-column-11{width:91.5%}
  374. .night-tabs.grid-column-offset-1,
  375. .night-tabs.grid-column-offset-1:first-child{margin-left:8.5%}
  376. .night-tabs.grid-column-offset-2,
  377. .night-tabs.grid-column-offset-2:first-child{margin-left:17%}
  378. .night-tabs.grid-column-offset-3,
  379. .night-tabs.grid-column-offset-3:first-child{margin-left:25.5%}
  380. .night-tabs.grid-column-offset-4,
  381. .night-tabs.grid-column-offset-4:first-child{margin-left:34%}
  382. .night-tabs.grid-column-offset-5,
  383. .night-tabs.grid-column-offset-5:first-child{margin-left:42.5%}
  384. .night-tabs.grid-column-offset-6,
  385. .night-tabs.grid-column-offset-6:first-child{margin-left:51%}
  386. .night-tabs.grid-column-offset-7,
  387. .night-tabs.grid-column-offset-7:first-child{margin-left:59.5%}
  388. .night-tabs.grid-column-offset-8,
  389. .night-tabs.grid-column-offset-8:first-child{margin-left:68%}
  390. .night-tabs.grid-column-offset-9,
  391. .night-tabs.grid-column-offset-9:first-child{margin-left:76.5%}
  392. .night-tabs.grid-column-offset-10,.night-tabs.grid-column-offset-10:first-child{margin-left:85%}
  393. .night-tabs.grid-column-offset-11,.night-tabs.grid-column-offset-11:first-child{margin-left:93.5%}
  394. /**
  395. *CONTENTS-colors.css
  396. *
  397. *COLORS
  398. *Default(Gray/Grey),Red,Blue,Green,Purple,Orange,Yellow,Pink,Brown,Teal,Turquoise.
  399. *
  400. */
  401. /*------------------------------------*\
  402. #COLORS
  403. \*------------------------------------*/
  404. /*->>>Default(Gray/Grey)<<<-*/
  405. .night-tabslabel:hoverspanspan,
  406. .night-tabsinput:checked+labelspanspan,
  407. .night-tabs-color-defaultlabel:hoverspanspan,
  408. .night-tabs-color-defaultinput:checked+labelspanspan{background:#6c7a89}
  409. /*->>>Blue<<<-*/
  410. .night-tabs-color-bluelabel:hoverspanspan,
  411. .night-tabs-color-blueinput:checked+labelspanspan{background:#1e8bc3}
  412. /*->>>Red<<<-*/
  413. .night-tabs-color-redlabel:hoverspanspan,
  414. .night-tabs-color-redinput:checked+labelspanspan{background:#ef4836}
  415. /*->>>Green<<<-*/
  416. .night-tabs-color-greenlabel:hoverspanspan,
  417. .night-tabs-color-greeninput:checked+labelspanspan{background:#27ae60}
  418. /*->>>Purple<<<-*/
  419. .night-tabs-color-purplelabel:hoverspanspan,
  420. .night-tabs-color-purpleinput:checked+labelspanspan{background:#9b59b6}
  421. /*->>>Orange<<<-*/
  422. .night-tabs-color-orangelabel:hoverspanspan,
  423. .night-tabs-color-orangeinput:checked+labelspanspan{background:#F9690E}
  424. /*->>>Yellow<<<-*/
  425. .night-tabs-color-yellowlabel:hoverspanspan,
  426. .night-tabs-color-yellowinput:checked+labelspanspan{background:#a8880a}
  427. /*->>>Pink<<<-*/
  428. .night-tabs-color-pinklabel:hoverspanspan,
  429. .night-tabs-color-pinkinput:checked+labelspanspan{background:#dB0a5b}
  430. /*->>>Brown<<<-*/
  431. .night-tabs-color-brownlabel:hoverspanspan,
  432. .night-tabs-color-browninput:checked+labelspanspan{background:#926239}
  433. /*->>>Teal<<<-*/
  434. .night-tabs-color-teallabel:hoverspanspan,
  435. .night-tabs-color-tealinput:checked+labelspanspan{background:#008080}
  436. /*->>>Turquoise<<<-*/
  437. .night-tabs-color-turquoiselabel:hoverspanspan,
  438. .night-tabs-color-turquoiseinput:checked+labelspanspan{background:#16a085}
  439. /**
  440. *CONTENTS-mobile.css
  441. *
  442. *RESPONSIVESTACKING
  443. *Tabsstackontopofeachotheronmobiledevices.
  444. *
  445. */
  446. /*------------------------------------*\
  447. #RESPONSIVESTACKING
  448. \*------------------------------------*/
  449. @mediascreenand(max-width:48em){
  450. .night-tabs.grid-column,
  451. .night-tabs.grid-column:first-child{
  452. float:none;
  453. width:100%;
  454. margin:1em000
  455. }
  456. .night-tabs>label{
  457. display:block;
  458. float:none;
  459. width:100%;
  460. padding-right:0;
  461. padding-left:0;
  462. text-align:left;
  463. margin:0
  464. }
  465. .night-tabs>.night-tabs-content{
  466. margin-top:0;
  467. margin-right:0;
  468. margin-left:0
  469. }
  470. .night-tabs>.night-tabs-content>li{
  471. -webkit-transform-origin:50%0%;
  472. -ms-transform-origin:50%0%;
  473. transform-origin:50%0%
  474. }
  475. .night-tabs.night-tabs-animation-flip>ul>li{
  476. -webkit-transform:rotateX(-90deg);
  477. transform:rotateX(-90deg)
  478. }
  479. }
  480. body{
  481. background:#111;
  482. margin-top:2em
  483. }
  484.  

以上就是一款纯css3如何实现的tab选项卡的实列好代码教程。幸福不是在于我们多么努力的去争取是在于我们多么努力的去珍惜!更多关于一款纯css3如何实现的tab选项卡的实列好代码教程请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
如何利用纯CSS3如何实现tab选项卡切换示例代码

如何使用CSS3如何实现选项卡切换的方法

CSS文章列表切换选项卡效果实例

如何使用css3如何实现的tab选项卡代码分享

多角色选项卡登录效果