{"html":"\n \n

\n \n

ball

\n \n \n \n \n

Game

\n\n","css":".container {\n --UnChacked-color: hsl(0, 0%, 10%);\n --chacked-color: hsl(216, 100%, 60%);\n --font-color: white;\n --chacked-font-color: var(--font-color);\n --icon-size: 1.5em;\n --anim-time: 0.2s;\n --anim-scale: 0.1;\n --base-radius: 0.8em;\n}\n\n.container {\n display: flex;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n fill: var(--font-color);\n color: var(--font-color);\n}\n\n/* Hide the default checkbox */\n.container input {\n display: none;\n}\n\n/* Base custom checkbox */\n.checkmark {\n background: var(--UnChacked-color);\n border-radius: var(--base-radius);\n\n display: flex;\n padding: 0.5em;\n}\n.icon {\n width: var(--icon-size);\n height: auto;\n filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25));\n}\n.name {\n margin: 0 0.25em;\n}\n.Yes {\n width: 0;\n}\n.name.Yes {\n display: none;\n}\n\n/* action custom checkbox */\n.container:hover .checkmark,\n.container:hover .icon,\n.container:hover .name {\n transform: scale(calc(1 + var(--anim-scale)));\n}\n\n.container:active .checkmark,\n.container:active .icon,\n.container:active .name {\n transform: scale(calc(1 - var(--anim-scale) / 2));\n border-radius: calc(var(--base-radius) * 2);\n}\n.checkmark::before {\n content: \"\";\n opacity: 0.5;\n transform: scale(1);\n border-radius: var(--base-radius);\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n}\n.checkmark:hover:before {\n background-color: hsla(0, 0%, 50%, 0.2);\n}\n.container input:checked + .checkmark:before {\n animation: boon calc(var(--anim-time)) ease;\n animation-delay: calc(var(--anim-time) / 2);\n}\n\n/* When the checkbox is checked*/\n.container input:checked + .checkmark {\n --UnChacked-color: var(--chacked-color);\n fill: var(--chacked-font-color);\n color: var(--chacked-font-color);\n}\n\n.container input:checked ~ .checkmark .No {\n width: 0;\n}\n.container input:checked ~ .checkmark .name.No {\n display: none;\n}\n\n.container input:checked ~ .checkmark .Yes {\n width: var(--icon-size);\n}\n.container input:checked ~ .checkmark .name.Yes {\n width: auto;\n display: unset;\n}\n\n/*Animation*/\n.container,\n.checkmark,\n.checkmark:after,\n.icon,\n.checkmark .name {\n transition: all var(--anim-time);\n}\n\n/*Unuse*/\n@keyframes icon-rot {\n 50% {\n transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale)));\n border-radius: 1em;\n }\n to {\n transform: rotate(360deg);\n border-radius: var(--base-radius);\n }\n}\n/*Unuse*/\n@keyframes boo {\n 80% {\n transform: scale(1.4);\n }\n 99% {\n transform: scale(1.7);\n border: 2px solid var(--UnChacked-color);\n }\n to {\n transform: scale(0);\n }\n}\n"}

grumpy-wombat-18

👁 实时预览

📝 源代码