CSS
语言:
CSSSCSS
确定
body {
overflow: hidden;
background: #000;
}
body .container {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin: -150px -250px;
counter-reset: tab-counter 4;
}
body .container input[type=radio] {
display: none;
}
body .container input[type=radio]:checked + label ~ label:nth-child(2) {
width: 54px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(2) .content {
-webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
opacity: 0;
}
body .container input[type=radio] + label {
position: absolute;
height: 100%;
box-shadow: 2px 0px 4px -2px #000;
cursor: pointer;
-webit-transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
}
body .container input[type=radio] + label:nth-child(2) {
box-shadow: none;
}
body .container input[type=radio] + label:nth-child(2) {
width: 500px;
background: #64B5F6;
}
body .container input[type=radio] + label .content {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
margin-left: -125px;
counter-increment: tab-counter -1;
text-align: center;
}
body .container input[type=radio] + label .content:after {
content: counter(tab-counter);
}
body .container input[type=radio]:checked + label ~ label:nth-child(4) {
width: 30px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(4) .content {
-webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
opacity: 0;
}
body .container input[type=radio] + label {
position: absolute;
height: 100%;
box-shadow: 2px 0px 4px -2px #000;
cursor: pointer;
-webit-transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
}
body .container input[type=radio] + label:nth-child(2) {
box-shadow: none;
}
body .container input[type=radio] + label:nth-child(4) {
width: 476px;
background: #81C784;
}
body .container input[type=radio] + label:nth-child(4):after {
position: absolute;
content: '';
top: 33.33333%;
left: 100%;
width: 18px;
height: 100px;
border-radius: 0 10px 10px 0;
background: #81C784;
box-shadow: 3px 0px 6px -3px #000;
}
body .container input[type=radio] + label .content {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
margin-left: -125px;
counter-increment: tab-counter -1;
text-align: center;
}
body .container input[type=radio] + label .content:after {
content: counter(tab-counter);
}
body .container input[type=radio]:checked + label ~ label:nth-child(6) {
width: 6px;
}
body .container input[type=radio]:checked + label ~ label:nth-child(6) .content {
-webit-transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: opacity 0.4s cubic-bezier(0.11, 0.65, 0.04, 1);
opacity: 0;
}
body .container input[type=radio] + label {
position: absolute;
height: 100%;
box-shadow: 2px 0px 4px -2px #000;
cursor: pointer;
-webit-transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
transition: width 1.2s cubic-bezier(0.11, 0.65, 0.04, 1);
}
body .container input[type=radio] + label:nth-child(2) {
box-shadow: none;
}
body .container input[type=radio] + label:nth-child(6) {
width: 452px;
background: #E57373;
}
body .container input[type=radio] + label:nth-child(6):after {
position: absolute;
content: '';
top: 0%;
left: 100%;
width: 18px;
height: 100px;
border-radius: 0 10px 10px 0;
background: #E57373;
box-shadow: 3px 0px 6px -3px #000;
}
body .container input[type=radio] + label .content {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
margin-left: -125px;
counter-increment: tab-counter -1;
text-align: center;
}
body .container input[type=radio] + label .content:after {
content: counter(tab-counter);
}