css实现带点状索引的自适应tab选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:css实现带点状索引的自适应tab选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata); ul#tabs-list { list-style:none; text-align:center; border-bottom:1px solid #dfdfdf; margin:0; padding:0 } label.panel-label { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; display:block; width:100%; color:#bdc3c7; cursor:pointer; background-color:#ecf0f1; transition-property:background-color,color; transition-duration:200ms } label.panel-label:hover { color:#c0392b } #panels { background-color:white } #panels .container { margin:0 auto; width:90% } #panels section header label.panel-label { padding:12px 24px; box-sizing:border-box } #panels section main { box-sizing:border-box; max-height:0; opacity:0; transition:opacity 600ms; overflow-y:hidden } #panel-1-ctrl:checked ~ #panels #panel-1 main { max-height:initial; opacity:1; padding:48px 24px } #panel-2-ctrl:checked ~ #panels #panel-2 main { max-height:initial; opacity:1; padding:48px 24px } #panel-3-ctrl:checked ~ #panels #panel-3 main { max-height:initial; opacity:1; padding:48px 24px } #panel-4-ctrl:checked ~ #panels #panel-4 main { max-height:initial; opacity:1; padding:48px 24px } #panel-5-ctrl:checked ~ #panels #panel-5 main { max-height:initial; opacity:1; padding:48px 24px } @media all and (max-width:767px) { #nav-ctrl:checked ~ #tabs-list #li-for-panel-1 { max-height:46px; opacity:1 } #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 { max-height:46px; opacity:1 } #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 { max-height:46px; opacity:1 } #nav-ctrl:checked ~ #tabs-list #li-for-panel-4 { max-height:46px; opacity:1 } #nav-ctrl:checked ~ #tabs-list #li-for-panel-5 { max-height:46px; opacity:1 } #open-nav-label { display:block; position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer } #nav-ctrl:checked ~ #tabs-list #open-nav-label { display:none } #close-nav-label { display:block; max-height:0; overflow-y:hidden; background-color:#444; color:#ecf0f1; padding:0; transition:max-height 200ms; cursor:pointer; text-transform:uppercase; font-size:12px; line-height:22px; letter-spacing:1px } #nav-ctrl:checked ~ #tabs-list #close-nav-label { max-height:36px; opacity:1; padding:12px 24px } #tabs-list { position:relative } #tabs-list label.panel-label { padding:12px 0 } #tabs-list #li-for-panel-1 { max-height:0; overflow-y:hidden; transition:max-height 200ms } #tabs-list #li-for-panel-2 { max-height:0; overflow-y:hidden; transition:max-height 200ms } #tabs-list #li-for-panel-3 { max-height:0; overflow-y:hidden; transition:max-height 200ms } #tabs-list #li-for-panel-4 { max-height:0; overflow-y:hidden; transition:max-height 200ms } #tabs-list #li-for-panel-5 { max-height:0; overflow-y:hidden; transition:max-height 200ms } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { max-height:46px; opacity:1 } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { background-color:white; color:#c0392b; background-color:#c0392b; color:white } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { max-height:46px; opacity:1 } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { background-color:white; color:#c0392b; background-color:#c0392b; color:white } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { max-height:46px; opacity:1 } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { background-color:white; color:#c0392b; background-color:#c0392b; color:white } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 { max-height:46px; opacity:1 } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label { background-color:white; color:#c0392b; background-color:#c0392b; color:white } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 { max-height:46px; opacity:1 } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label { background-color:white; color:#c0392b; background-color:#c0392b; color:white } #panels .container { width:100% } #panels section header { display:block } }@media all and (min-width:768px) { #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 { pointer-events:none; cursor:default; transform:translate3d(0,1px,0); box-shadow:none; border-right:0 } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last { border-right:1px solid transparent } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1+li { border-left:1px solid #dfdfdf } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label { background-color:white; color:#c0392b; padding-top:26px } #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after { height:6px } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 { pointer-events:none; cursor:default; transform:translate3d(0,1px,0); box-shadow:none; border-right:0 } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last { border-right:1px solid transparent } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2+li { border-left:1px solid #dfdfdf } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label { background-color:white; color:#c0392b; padding-top:26px } #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after { height:6px } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 { pointer-events:none; cursor:default; transform:translate3d(0,1px,0); box-shadow:none; border-right:0 } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last { border-right:1px solid transparent } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3+li { border-left:1px solid #dfdfdf } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label { background-color:white; color:#c0392b; padding-top:26px } #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after { height:6px } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 { pointer-events:none; cursor:default; transform:translate3d(0,1px,0); box-shadow:none; border-right:0 } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4.last { border-right:1px solid transparent } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4+li { border-left:1px solid #dfdfdf } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label { background-color:white; color:#c0392b; padding-top:26px } #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after { height:6px } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 { pointer-events:none; cursor:default; transform:translate3d(0,1px,0); box-shadow:none; border-right:0 } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5.last { border-right:1px solid transparent } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5+li { border-left:1px solid #dfdfdf } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label { background-color:white; color:#c0392b; padding-top:26px } #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after { height:6px } ul#tabs-list { text-align:center; border-bottom:1px solid #dfdfdf } ul#tabs-list li { display:inline-block; text-align:center; font-size:.875em; width:18%; box-shadow:0 -2px 2px rgba(0,0,0,0.05); border-right:1px solid #dfdfdf; position:relative } ul#tabs-list li:hover { transition:none; border-right:0 } ul#tabs-list li:hover.last { border-right:1px solid transparent } ul#tabs-list li:hover+li { border-left:1px solid #dfdfdf } ul#tabs-list li label.panel-label { position:relative; padding:24px 0 } ul#tabs-list li label.panel-label::after { content:""; position:absolute; width:100%; left:0; bottom:100%; background-color:#c0392b; height:0; transition-property:height; transition-duration:200ms } ul#tabs-list li label.panel-label:hover { padding-top:25px } ul#tabs-list li label.panel-label:hover::after { height:6px } #open-nav-label,#close-nav-label { display:none } #nav-ctrl { display:none } }@media all and (min-width:900px) { main { width:70%; margin:0 auto } }.panel-radios { position:fixed; left:50%; top:10px; width:20px; opacity:.5; z-index:99 } .panel-radios:nth-child(1) { transform:translateX(-50px) } .panel-radios:nth-child(2) { transform:translateX(-30px) } .panel-radios:nth-child(3) { transform:translateX(-10px) } .panel-radios:nth-child(4) { transform:translateX(10px) } .panel-radios:nth-child(5) { transform:translateX(30px) } .panel-radios:nth-child(6) { top:30px; transform:translateX(-10px); display:block } body { background:#e74c3c; color:#444; font-family:"Open Sans","Helvetica Neue",Helvetica,sans-serif } #introduction { width:90%; margin:0 auto; padding:48px 24px; color:white } #introduction h1 { font-weight:300; text-align:center } main h1 { margin-top:0; f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0