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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0