{"html":"\n \n

\n \n\n","css":"/* made by ihaverizzra */\n/* github.com/ihaverizzra */\n\n.adv-checkbox-label {\n --size: 2em;\n --border-width: 0.15em;\n --tick-scale: 0.8;\n --box-bg: #333;\n --box-border: #555;\n --box-border-hover: #888;\n --tick-bg: #00aaff;\n --tick-glow: #00ffff;\n --glitch-1-color: #ff00ff;\n --glitch-2-color: #00ff00;\n --shine-color: rgba(255, 255, 255, 0.5);\n --focus-color: #6ebff5;\n --shadow-color: rgba(0, 0, 0, 0.4);\n --transition-speed: 0.3s;\n --glitch-speed: 0.4s;\n --shine-speed: 1.2s;\n --jelly-speed: 0.5s;\n\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n gap: 0.5em;\n font-size: 16px;\n color: #eee;\n font-family: sans-serif; /* Added for clarity */\n}\n\n.adv-checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.adv-checkbox-box {\n width: var(--size);\n height: var(--size);\n border: var(--border-width) solid var(--box-border);\n background-color: var(--box-bg);\n border-radius: 0.25em;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n transition:\n border-color var(--transition-speed) ease,\n background-color var(--transition-speed) ease,\n box-shadow var(--transition-speed) ease;\n box-shadow:\n 0 0.1em 0.1em var(--shadow-color),\n 0 0.2em 0.3em var(--shadow-color),\n inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3);\n overflow: hidden; /* Important for containing inner elements */\n}\n\n.adv-checkbox-tick-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: scale(0); /* Start hidden */\n opacity: 0;\n transition:\n transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),\n opacity var(--transition-speed) ease;\n}\n\n.adv-checkbox-tick {\n width: calc(var(--size) * var(--tick-scale));\n height: calc(var(--size) * var(--tick-scale));\n background-color: var(--tick-bg);\n border-radius: 0.15em;\n position: relative;\n box-shadow:\n 0 0 0.5em var(--tick-glow),\n 0 0 1em var(--tick-glow),\n 0 0.1em 0.2em var(--shadow-color);\n overflow: hidden;\n}\n\n.adv-checkbox-shine {\n position: absolute;\n top: -10%;\n left: -10%;\n width: 120%;\n height: 30%;\n background: var(--shine-color);\n transform: rotate(20deg) translateX(-150%);\n filter: blur(0.1em);\n opacity: 0;\n transition:\n transform var(--shine-speed) ease-out,\n opacity var(--shine-speed) ease-out;\n}\n\n.adv-checkbox-glitch {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 0.15em;\n opacity: 0;\n mix-blend-mode: hard-light; /* Changed blend mode */\n animation-duration: var(--glitch-speed);\n animation-timing-function: steps(3, end);\n animation-iteration-count: infinite;\n transition: opacity var(--transition-speed) ease;\n}\n\n.adv-checkbox-glitch--1 {\n background-color: var(--glitch-1-color);\n animation-name: glitch-effect-1;\n}\n\n.adv-checkbox-glitch--2 {\n background-color: var(--glitch-2-color);\n animation-name: glitch-effect-2;\n}\n\n/* Checked State */\n.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-tick-container {\n transform: scale(1);\n opacity: 1;\n}\n\n.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-glitch {\n opacity: 0.5;\n}\n\n.adv-checkbox-input:checked + .adv-checkbox-box .adv-checkbox-shine {\n opacity: 1;\n transform: rotate(20deg) translateX(150%);\n}\n\n/* Hover State */\n.adv-checkbox-label:hover .adv-checkbox-box {\n border-color: var(--box-border-hover);\n}\n\n/* Focus State */\n.adv-checkbox-input:focus-visible + .adv-checkbox-box {\n outline: none; /* Remove default */\n box-shadow:\n 0 0.1em 0.1em var(--shadow-color),\n 0 0.2em 0.3em var(--shadow-color),\n inset 0 0.1em 0.2em rgba(0, 0, 0, 0.3),\n 0 0 0 0.15em var(--box-bg),\n /* Inner space */ 0 0 0 0.3em var(--focus-color); /* Outer glow */\n}\n\n/* Active State (Jelly) */\n.adv-checkbox-input:active + .adv-checkbox-box .adv-checkbox-tick-container {\n animation: jelly-pop var(--jelly-speed) ease;\n}\n\n@keyframes glitch-effect-1 {\n 0%,\n 100% {\n transform: translate(0.03em, -0.03em);\n clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);\n }\n 33% {\n transform: translate(-0.02em, 0.04em);\n clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%);\n }\n 66% {\n transform: translate(0.01em, -0.02em);\n clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);\n }\n}\n\n@keyframes glitch-effect-2 {\n 0%,\n 100% {\n transform: translate(-0.03em, 0.02em);\n clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);\n }\n 33% {\n transform: translate(0.03em, -0.03em);\n clip-path: polygon(0 45%, 100% 45%, 100% 75%, 0 75%);\n }\n 66% {\n transform: translate(-0.01em, 0.01em);\n clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);\n }\n}\n\n@keyframes jelly-pop {\n 0% {\n transform: scale(1);\n }\n 30% {\n transform: scale(1.2, 0.8);\n }\n 50% {\n transform: scale(0.9, 1.1);\n }\n 70% {\n transform: scale(1.05, 0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n.adv-checkbox-text {\n /* Optional: Style the text next to the checkbox */\n line-height: var(--size); /* Align text vertically with the box */\n}\n"}

dry-frog-51

👁 实时预览

📝 源代码