252 lines
7.0 KiB
CSS
252 lines
7.0 KiB
CSS
*, *:before, *:after {
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: #ffffcc;
|
|
color: #171717;
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
nav {
|
|
font: 1em "ZCOOL QingKe HuangYou", sans-serif;
|
|
margin: 1.5em auto;
|
|
width: 5em;
|
|
height: 4.5em;
|
|
text-transform: uppercase;
|
|
}
|
|
nav input {
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9;
|
|
}
|
|
nav input:focus {
|
|
outline: transparent;
|
|
}
|
|
nav, nav ul {
|
|
position: relative;
|
|
}
|
|
nav li, nav span, nav a, nav label {
|
|
display: block;
|
|
}
|
|
nav li {
|
|
left: 50%;
|
|
text-align: center;
|
|
transform: translateX(-50%);
|
|
width: 5em;
|
|
}
|
|
nav li, nav li span {
|
|
position: absolute;
|
|
transition: all 0.7s ease-out;
|
|
transform-origin: 50% 0;
|
|
}
|
|
nav li:first-child, nav li:last-child {
|
|
width: 4.4em;
|
|
}
|
|
nav li:first-child span, nav li:last-child span {
|
|
line-height: 4.5;
|
|
}
|
|
nav li:first-child {
|
|
background: #ffd580;
|
|
border-radius: 0 0 0.45em 0.45em / 0 0 100% 100%;
|
|
box-shadow: 0.2em 0 0 #e69900 inset, -0.2em 0 0 #e69900 inset, 0 0 0 #e69900 inset, 0 -1.4em 0 #e69900 inset;
|
|
top: 3.6em;
|
|
height: 0.9em;
|
|
z-index: 0;
|
|
}
|
|
nav li:first-child label:before, nav li:first-child label:after {
|
|
background: #cc0000;
|
|
border-radius: 0.2em;
|
|
box-shadow: 0 -0.1em 0 maroon inset;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 3em;
|
|
height: 0.4em;
|
|
}
|
|
nav li:first-child label:before {
|
|
background-image: radial-gradient(0.2em 0.3em at 0.2em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
nav li:first-child label:after {
|
|
background-image: radial-gradient(0.2em 0.3em at 2.8em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
nav li:nth-child(2) {
|
|
background: #6b2e2e;
|
|
background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 20%);
|
|
background-position: 0 -0.35em;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 0.35em;
|
|
box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0 0 #6b2e2e inset, 0 -0.6em 0 #6b2e2e inset;
|
|
top: 2.9em;
|
|
width: 4.8em;
|
|
height: 0.7em;
|
|
z-index: 1;
|
|
}
|
|
nav li:nth-child(2) span {
|
|
line-height: 5;
|
|
}
|
|
nav li:nth-child(2) a {
|
|
color: white;
|
|
}
|
|
nav li:nth-child(3) {
|
|
background: #ffd500;
|
|
background-image: radial-gradient(10% 10% at 15% 15%, #ffea80 49%, rgba(255, 234, 128, 0) 50%);
|
|
border-radius: 0.1em;
|
|
top: 2.7em;
|
|
width: 4em;
|
|
height: 0.2em;
|
|
z-index: 2;
|
|
}
|
|
nav li:nth-child(3) span {
|
|
line-height: 4;
|
|
}
|
|
nav li:nth-child(3):before {
|
|
background: inherit;
|
|
border-radius: 0 0 100% 50% / 0 0 100% 0;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
transform: rotate(-45deg);
|
|
transform-origin: 0 0;
|
|
transition: transform 0.7s ease-out;
|
|
}
|
|
nav li:nth-child(4) {
|
|
background: #40bf40;
|
|
background-image: linear-gradient(45deg, rgba(102, 204, 102, 0) 24%, #66cc66 25%, #66cc66 27%, rgba(102, 204, 102, 0) 28%), linear-gradient(45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 49%, rgba(102, 204, 102, 0) 50%), linear-gradient(45deg, rgba(102, 204, 102, 0) 74%, #66cc66 75%, #66cc66 77%, rgba(102, 204, 102, 0) 78%), linear-gradient(-45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 52%, rgba(102, 204, 102, 0) 53%);
|
|
background-position: 0 0;
|
|
border-radius: 0.15em;
|
|
box-shadow: 0 0.4em 0 #40bf40 inset, -0.4em 0 0 #40bf40 inset;
|
|
top: 2.4em;
|
|
width: 4.5em;
|
|
height: 0.3em;
|
|
z-index: 3;
|
|
}
|
|
nav li:nth-child(4) span {
|
|
line-height: 4.5;
|
|
}
|
|
nav li:nth-child(5) {
|
|
background: #ed765e;
|
|
background-image: radial-gradient(20% 25% at 50% 30%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(20% 25% at 50% 70%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 30% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 70% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%);
|
|
background-position: 0 -0.4em;
|
|
border-radius: 0.2em;
|
|
box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0 0 #e84f30 inset, 0 -0.8em 0 #e84f30 inset;
|
|
top: 2em;
|
|
width: 5em;
|
|
height: 0.4em;
|
|
z-index: 4;
|
|
}
|
|
nav li:nth-child(5) span {
|
|
line-height: 5;
|
|
}
|
|
nav li:last-child {
|
|
background: #e69900;
|
|
background-image: radial-gradient(0.5em 0.3em at 0.5em 0.2em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 0 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 1em 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em);
|
|
background-position: 0 0;
|
|
background-size: 1em 1em;
|
|
border-radius: 2em 2em 0 0 / 100% 100% 0 0;
|
|
box-shadow: 0.4em 0 0 0 #e69900 inset, -0.4em 0 0 0 #e69900 inset;
|
|
height: 2em;
|
|
z-index: 5;
|
|
}
|
|
nav li span, nav li label, nav li a {
|
|
border-radius: inherit;
|
|
height: 100%;
|
|
}
|
|
nav li span {
|
|
margin: auto;
|
|
top: 0;
|
|
width: 100%;
|
|
transform: scaleY(0);
|
|
transform-origin: 50% 0;
|
|
}
|
|
nav li a {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
nav li a:before {
|
|
background: #cc0000;
|
|
background-image: radial-gradient(0.4em 0.2em at 3.3em 0.1em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
|
|
border-radius: 0.2em;
|
|
box-shadow: 0 -0.1em 0 maroon inset;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 62%;
|
|
left: 50%;
|
|
width: 3.5em;
|
|
height: 0.4em;
|
|
transform: translateX(-50%) scaleX(0);
|
|
transform-origin: 0 50%;
|
|
transition: transform 0.2s linear;
|
|
}
|
|
nav li a:hover:before {
|
|
transform: translateX(-50%) scaleX(1);
|
|
}
|
|
nav li .sr {
|
|
overflow: hidden;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
nav input:checked + ul li:nth-child(1) {
|
|
border-radius: 50%;
|
|
box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
|
|
height: 4.4em;
|
|
transform: translate(-50%, -3.5em);
|
|
}
|
|
nav input:checked + ul li:nth-child(2) {
|
|
background-position: 0 0;
|
|
border-radius: 50%;
|
|
box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0.3em 0 #6b2e2e inset, 0 -0.3em 0 #6b2e2e inset;
|
|
height: 4.8em;
|
|
transform: translate(-50%, 1.6em);
|
|
}
|
|
nav input:checked + ul li:nth-child(3) {
|
|
border-radius: 0.2em;
|
|
height: 4em;
|
|
transform: translate(-50%, 6.6em);
|
|
}
|
|
nav input:checked + ul li:nth-child(3):before {
|
|
transform: rotate(-90deg);
|
|
}
|
|
nav input:checked + ul li:nth-child(4) {
|
|
border-radius: 1.5em 1em 1.2em 0.8em;
|
|
height: 4.5em;
|
|
transform: translate(-50%, 10.9em);
|
|
}
|
|
nav input:checked + ul li:nth-child(5) {
|
|
border-radius: 50%;
|
|
background-position: 0 0;
|
|
box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0.4em 0 #e84f30 inset, 0 -0.4em 0 #e84f30 inset;
|
|
height: 5em;
|
|
transform: translate(-50%, 15.8em);
|
|
}
|
|
nav input:checked + ul li:nth-child(6) {
|
|
border-radius: 50%;
|
|
box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
|
|
height: 4.4em;
|
|
background-position: 0 2.2em;
|
|
transform: translate(-50%, 22.8em);
|
|
}
|
|
nav input:checked + ul li span {
|
|
transform: scaleY(1);
|
|
}
|