{"html":"

\n \n \n

\n \n \n \n

\n \n

\n","css":"/* uiverse.io styling */\n.uiverse-wrapper {\n --size: 40px;\n --color-default: #d1d1d1;\n --color-active: #000000;\n --transition: 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n.cb-container {\n display: block;\n position: relative;\n cursor: pointer;\n width: var(--size);\n height: var(--size);\n user-select: none;\n}\n\n/* Hide the native checkbox */\n.cb-container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* The custom box */\n.checkmark {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: white;\n border: 3px solid var(--color-default);\n border-radius: 12px;\n transition: var(--transition);\n display: flex;\n justify-content: center;\n align-items: center;\n box-shadow: 4px 4px 0px var(--color-default);\n}\n\n/* Inside SVG styling */\n.checkmark svg {\n width: 20px;\n height: 20px;\n color: white;\n transform: scale(0) rotate(-45deg);\n transition: var(--transition);\n filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));\n}\n\n/* On Hover: Slight lift */\n.cb-container:hover .checkmark {\n transform: translate(-2px, -2px);\n box-shadow: 6px 6px 0px var(--color-default);\n}\n\n/* CHECKED STATE */\n.cb-container input:checked ~ .checkmark {\n background-color: var(--color-active);\n border-color: var(--color-active);\n box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);\n transform: scale(1.1) rotate(5deg);\n}\n\n/* When checked, make the SVG pop out */\n.cb-container input:checked ~ .checkmark svg {\n transform: scale(1) rotate(0deg);\n}\n\n/* Active \"Pressed\" state */\n.cb-container:active .checkmark {\n transform: translate(2px, 2px);\n box-shadow: 2px 2px 0px var(--color-default);\n}\n"}

rare-mule-26

👁 实时预览

📝 源代码