{"html":"\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":".switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20vmin;\n height: 10vmin;\n background: #141414;\n border-radius: 5vmin;\n overflow: hidden;\n box-shadow:\n 0 0 0.1vmin 0.1vmin #000000,\n 0 0 0.5vmin 0.1vmin #0b0b10 inset;\n cursor: pointer;\n}\n\n.switch input {\n display: none;\n}\n\n.thumb {\n position: absolute;\n width: 8.75vmin;\n height: 8.75vmin;\n top: 0.6vmin;\n left: calc(100% - 9.333vmin);\n border-radius: 5vmin;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n animation: move-skull-left 0.5s ease-in-out 0.5s forwards;\n}\n\n.switch input:checked ~ .thumb {\n left: 0.6vmin;\n animation: move-skull-right 0.5s ease-in-out 0.5s forwards;\n}\n\n@keyframes move-skull-right {\n 0% {\n left: 0.6vmin;\n }\n 100% {\n left: calc(100% - 9.333vmin);\n }\n}\n\n@keyframes move-skull-left {\n 0% {\n left: calc(100% - 9.333vmin);\n }\n 100% {\n left: 0.6vmin;\n }\n}\n\n/*** Skull ***/\n\n.thumb > * {\n position: absolute;\n filter: drop-shadow(0px 1px 1px #000);\n animation: unselected 1.5s ease-in-out 0s reverse forwards;\n}\n\n.switch input:checked ~ .thumb * {\n animation: selected 1.5s ease-in-out 0s forwards;\n}\n\n@keyframes selected {\n 0%,\n 50% {\n filter: drop-shadow(0px 1px 1px #000) brightness(1);\n }\n 50.01%,\n 100% {\n filter: drop-shadow(0px 1px 1px #000) brightness(1.875);\n }\n}\n\n@keyframes unselected {\n 0%,\n 50% {\n filter: drop-shadow(0px 1px 1px #000) brightness(1);\n }\n 50.01%,\n 100% {\n filter: drop-shadow(0px 1px 1px #000) brightness(1.875);\n }\n}\n\n.cranium {\n background: linear-gradient(180deg, #888 0 54%, #fff0 0 94%, #888 0 100%),\n radial-gradient(\n circle at 75% 69%,\n #fff0 0 0.875vmin,\n #888 calc(0.875vmin + 1px) 2.425vmin,\n #fff0 calc(2.425vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 25% 69%,\n #fff0 0 0.875vmin,\n #888 calc(0.875vmin + 1px) 2.425vmin,\n #fff0 calc(2.425vmin + 1px) 100%\n );\n width: 100%;\n height: 7vmin;\n left: 0;\n top: 0;\n border-radius: 5vmin 5vmin 2.75vmin 2.75vmin;\n}\n\n.cranium:before {\n content: \"\";\n position: absolute;\n width: 0.625vmin;\n height: 0.625vmin;\n bottom: -0.375vmin;\n left: 3.75vmin;\n background: #888;\n border-radius: 100%;\n box-shadow: 0.625vmin 0 0 0 #888;\n}\n\n.cranium:after {\n content: \"\";\n position: absolute;\n width: 2.625vmin;\n height: 0.75vmin;\n bottom: -0.475vmin;\n left: 3vmin;\n background: radial-gradient(\n circle at 90% 10%,\n #888 0 0.5vmin,\n #fff0 calc(0.5vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 10% 10%,\n #888 0 0.5vmin,\n #fff0 calc(0.5vmin + 1px) 100%\n );\n border-radius: 0.5vmin;\n}\n\n.mouth {\n border: 0.425vmin solid #fff0;\n border-bottom-color: #888;\n width: 5.875vmin;\n left: 1.425vmin;\n height: 3vmin;\n top: 5.625vmin;\n background: radial-gradient(\n circle at 35% 98%,\n #888 0 0.325vmin,\n #fff0 calc(0.325vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 45% 100%,\n #888 0 0.325vmin,\n #fff0 calc(0.325vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 55% 100%,\n #888 0 0.325vmin,\n #fff0 calc(0.325vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 65% 98%,\n #888 0 0.325vmin,\n #fff0 calc(0.325vmin + 1px) 100%\n );\n background-repeat: no-repeat;\n border-radius: 100%;\n}\n\n.mouth:before,\n.mouth:after {\n content: \"\";\n position: absolute;\n border-radius: 100%;\n background: #888;\n width: 0.35vmin;\n height: 0.35vmin;\n left: 0.2vmin;\n bottom: 0.125vmin;\n}\n\n.mouth:after {\n left: 4.525vmin;\n}\n\n/*** Arm ***/\n\n@keyframes check-on {\n 0% {\n right: -65%;\n }\n 25%,\n 33% {\n right: 0%;\n }\n 66%,\n 80% {\n right: -50%;\n }\n 100% {\n right: -65%;\n }\n}\n\n@keyframes check-off {\n 0% {\n right: -65%;\n }\n 25%,\n 33% {\n right: 0%;\n }\n 66%,\n 80% {\n right: -50%;\n }\n 100% {\n right: -65%;\n }\n}\n\n.arm-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 5vmin;\n overflow: hidden;\n right: -65%;\n animation: check-off 1.5s ease-in-out 0s reverse forwards;\n}\n\n.switch input:checked ~ .arm-wrapper {\n animation: check-on 1.5s ease-in-out 0s forwards;\n}\n\n.arm {\n position: absolute;\n width: 8vmin;\n height: 2.5vmin;\n right: 2%;\n top: calc(50% - 1.25vmin);\n border-radius: 0.125vmin;\n}\n\n.bone {\n background: #fff;\n width: 4vmin;\n height: 1vmin;\n position: absolute;\n transform: rotate(0deg);\n top: 0.75vmin;\n right: -2vmin;\n}\n\n.bone:before,\n.bone:after,\n.big:before,\n.big:after {\n content: \"\";\n background: #fff;\n width: 0.75vmin;\n height: 0.75vmin;\n position: absolute;\n left: -0.25vmin;\n top: -0.25vmin;\n border-radius: 100%;\n box-shadow: 4vmin 0 0 0 #fff;\n}\n\n.bone:after {\n top: calc(100% - 0.5vmin);\n}\n\n.arm > .bone + .bone {\n top: 0.75vmin;\n left: 0.25vmin;\n height: 0.425vmin;\n width: 5.25vmin;\n box-shadow: 0 0.575vmin 0 0 #fff;\n}\n.arm > .bone + .bone:before,\n.arm > .bone + .bone:after {\n box-shadow: 5.075vmin 0 0 0 #fff;\n}\n\n.arm > .bone + .bone:after {\n top: 100%;\n}\n\n/*** Hand ***/\n\n.hand {\n position: absolute;\n background: radial-gradient(\n circle at 91% 29%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 92% 49%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 91% 69%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 76% 21%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 78% 39%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 79% 58%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n ),\n radial-gradient(\n circle at 78% 78%,\n #fff 0.25vmin,\n #fff0 calc(0.25vmin + 1px) 100%\n );\n width: 3.5vmin;\n height: 2.5vmin;\n left: -3.5vmin;\n z-index: 0;\n}\n\n.hand .bone,\n.big {\n width: 1.5vmin;\n left: 0.675vmin;\n height: 0.375vmin;\n border-radius: 0.25vmin 0 0 0.25vmin;\n}\n\n.hand .bone:before,\n.hand .bone:after,\n.big:before,\n.big:after {\n width: 0.4vmin;\n height: 0.4vmin;\n top: -0.125vmin;\n left: 1.125vmin;\n box-shadow: none;\n}\n.hand .bone:after,\n.big:after {\n top: 0.0625vmin;\n}\n\n.hand .bone:nth-child(1) {\n transform: rotate(5deg) translateY(-0.5vmin) translateX(0.075vmin);\n filter: drop-shadow(-1.5vmin 0vmin 0px #fff);\n}\n\n.hand .bone:nth-child(2) {\n transform: rotate(0deg) translateX(0.25vmin);\n filter: drop-shadow(-1.5vmin 0vmin 0px #fff);\n}\n\n.hand .bone:nth-child(3) {\n transform: rotate(-2deg) translateY(0.575vmin) translateX(0.25vmin);\n filter: drop-shadow(-1.5vmin 0vmin 0px #fff);\n}\n\n.hand .bone:nth-child(4) {\n transform: rotate(-5deg) translateY(1.15vmin) translateX(0.25vmin);\n filter: drop-shadow(-1.5vmin 0vmin 0px #fff);\n}\n\n.big {\n background: #fff;\n height: 0.5vmin !important;\n position: absolute;\n left: -2.125vmin !important;\n top: 0.575vmin;\n z-index: 1;\n filter: drop-shadow(-1.25vmin 0vmin 0px #fff) drop-shadow(0 0 1px #000);\n}\n"}

friendly-tiger-95

👁 实时预览

📝 源代码