CSS
语言：
CSSSCSS
确定
body {
display: flex;
margin: 0;
height: 100vh;
}
svg {
flex: 1;
}
path,
polygon {
fill: none;
stroke: currentColor;
stroke-width: 3px;
vector-effect: non-scaling-stroke;
}
polygon {
color: #807F85;
}
path {
color: mediumspringgreen;
}
form {
position: absolute;
left: 0;
padding: .5em;
background: #222;
color: #ddd;
font: 1em/2 trebuchet ms, verdana, sans-serif;
text-align: center;
}
input[type='radio'] {
position: absolute;
left: -100vw;
}
input[type='radio'] + label {
display: inline-block;
cursor: pointer;
}
input[type='radio'] + label:before {
box-sizing: border-box;
display: inline-block;
margin: 0 .5em;
border: solid .125em currentcolor;
padding: .25em;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background-clip: content-box;
vertical-align: middle;
content: '';
}
input[type='radio']:checked + label {
color: mediumspringgreen;
}
input[type='radio']:checked + label:before {
background-color: currentcolor;
}
input[type='range'] {
display: block;
margin: .5em auto 0;
border: solid 0 transparent;
border-width: 0 .25em;
padding: 0;
width: 14em;
height: 2.25em;
background: transparent;
font: inherit;
cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb,
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
}
input[type='range']::-moz-range-track {
border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
}
input[type='range']::-ms-track {
border: none;
width: 14em;
height: 0.25em;
border-radius: 0.125em;
background: #5c5c5c;
color: transparent;
}
input[type='range']::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
}
input[type='range']::-moz-range-thumb {
box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
cursor: ew-resize;
}
input[type='range']::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: solid 0.25em #222;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #5c5c5c;
transition: .3s;
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper {
background: transparent;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range'] + label {
display: block;
padding-bottom: 1em;
}
input[type='range']:focus {
outline: none;
}
input[type='range']:focus::-webkit-slider-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range']:focus::-moz-range-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range']:focus::-ms-thumb {
border-width: 0;
background: mediumspringgreen;
}
input[type='range'][max='1']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/1) 100%;
}
input[type='range'][max='1']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/1) 100%;
}
input[type='range'][max='1']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/1) 100%;
}
input[type='range'][max='1'][id='s'] {
width: 3em;
}
input[type='range'][max='1'][id='s']::-webkit-slider-runnable-track {
width: 3em;
}
input[type='range'][max='1'][id='s']::-moz-range-track {
width: 3em;
}
input[type='range'][max='1'][id='s']::-ms-track {
width: 3em;
}
input[type='range'][max='2']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/2) 100%;
}
input[type='range'][max='2']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/2) 100%;
}
input[type='range'][max='2']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/2) 100%;
}
input[type='range'][max='2'][id='s'] {
width: 4.5em;
}
input[type='range'][max='2'][id='s']::-webkit-slider-runnable-track {
width: 4.5em;
}
input[type='range'][max='2'][id='s']::-moz-range-track {
width: 4.5em;
}
input[type='range'][max='2'][id='s']::-ms-track {
width: 4.5em;
}
input[type='range'][max='3']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/3) 100%;
}
input[type='range'][max='3']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/3) 100%;
}
input[type='range'][max='3']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/3) 100%;
}
input[type='range'][max='3'][id='s'] {
width: 6em;
}
input[type='range'][max='3'][id='s']::-webkit-slider-runnable-track {
width: 6em;
}
input[type='range'][max='3'][id='s']::-moz-range-track {
width: 6em;
}
input[type='range'][max='3'][id='s']::-ms-track {
width: 6em;
}
input[type='range'][max='4']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/4) 100%;
}
input[type='range'][max='4']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/4) 100%;
}
input[type='range'][max='4']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/4) 100%;
}
input[type='range'][max='4'][id='s'] {
width: 7.5em;
}
input[type='range'][max='4'][id='s']::-webkit-slider-runnable-track {
width: 7.5em;
}
input[type='range'][max='4'][id='s']::-moz-range-track {
width: 7.5em;
}
input[type='range'][max='4'][id='s']::-ms-track {
width: 7.5em;
}
input[type='range'][max='5']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/5) 100%;
}
input[type='range'][max='5']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/5) 100%;
}
input[type='range'][max='5']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/5) 100%;
}
input[type='range'][max='6']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/6) 100%;
}
input[type='range'][max='6']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/6) 100%;
}
input[type='range'][max='6']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/6) 100%;
}
input[type='range'][max='7']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/7) 100%;
}
input[type='range'][max='7']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/7) 100%;
}
input[type='range'][max='7']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/7) 100%;
}
input[type='range'][max='8']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/8) 100%;
}
input[type='range'][max='8']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/8) 100%;
}
input[type='range'][max='8']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/8) 100%;
}
input[type='range'][max='9']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/9) 100%;
}
input[type='range'][max='9']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/9) 100%;
}
input[type='range'][max='9']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/9) 100%;
}
input[type='range'][max='10']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/10) 100%;
}
input[type='range'][max='10']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/10) 100%;
}
input[type='range'][max='10']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/10) 100%;
}
input[type='range'][max='11']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/11) 100%;
}
input[type='range'][max='11']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/11) 100%;
}
input[type='range'][max='11']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/11) 100%;
}
input[type='range'][max='12']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/12) 100%;
}
input[type='range'][max='12']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/12) 100%;
}
input[type='range'][max='12']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/12) 100%;
}
input[type='range'][max='13']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/13) 100%;
}
input[type='range'][max='13']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/13) 100%;
}
input[type='range'][max='13']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/13) 100%;
}
input[type='range'][max='14']:focus::-webkit-slider-runnable-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/14) 100%;
}
input[type='range'][max='14']:focus::-moz-range-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/14) 100%;
}
input[type='range'][max='14']:focus::-ms-track {
background-image: radial-gradient(circle at 0 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%), radial-gradient(circle at 100% 50%, #ffffff 0.125em, rgba(0, 0, 0, 0) 0%);
background-position: 0.75em 50%;
background-size: calc((100% - 1.5em)/14) 100%;
}
input.hid,
[id='t0']:checked ~ input.hid + label {
display: none;
}
772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
