{"html":"

\n \n \n \n \n \n \n \n \n

\n","css":".amazing-checkbox {\n display: inline-block;\n}\n\n/* Skjul standard checkbox */\n.amazing-checkbox input[type=\"checkbox\"] {\n display: none;\n}\n\n/* Label for checkbox */\n.amazing-checkbox label {\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n position: relative;\n}\n\n/* Checkbox-ikonet */\n.amazing-checkbox .checkbox-icon {\n width: 2em;\n height: 2em;\n border: 0.2em solid #ccc;\n border-radius: 0.3em;\n display: inline-block;\n position: relative;\n transition:\n background 0.3s,\n border-color 0.3s,\n transform 0.3s;\n box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.1);\n overflow: hidden; /* Viktig for ripple-effekten */\n}\n\n/* Ripple-effekt med pseudo-element */\n.amazing-checkbox .checkbox-icon::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n width: 0;\n height: 0;\n background: rgba(114, 137, 218, 0.3);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n\n/* Hover-effekt */\n.amazing-checkbox label:hover .checkbox-icon {\n border-color: #7289da;\n}\n\n/* Fokus-effekt */\n.amazing-checkbox label:focus-within .checkbox-icon {\n box-shadow: 0 0 0.3em rgba(114, 137, 218, 0.5);\n}\n\n/* Standardstil for checkmark (alltid til stede, men usynlig) */\n.amazing-checkbox .checkbox-icon .checkmark {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) scale(0);\n width: 1em;\n height: 1em;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Når checkboxen er krysset av */\n.amazing-checkbox input[type=\"checkbox\"]:checked + label .checkbox-icon {\n background: linear-gradient(45deg, #7289da, #99aab5);\n border-color: transparent;\n animation: pop 0.3s ease-out;\n}\n\n/* Vis checkmark med animasjon */\n.amazing-checkbox\n input[type=\"checkbox\"]:checked\n + label\n .checkbox-icon\n .checkmark {\n animation: checkmarkIn 0.3s forwards;\n}\n\n/* Ripple-animasjon ved avkrysning */\n.amazing-checkbox\n input[type=\"checkbox\"]:checked\n + label\n .checkbox-icon::before {\n animation: ripple 0.6s ease-out;\n}\n\n/* Når checkboxen fjernes – animer checkmark ut */\n.amazing-checkbox\n input[type=\"checkbox\"]:not(:checked)\n + label\n .checkbox-icon\n .checkmark {\n animation: checkmarkOut 0.3s forwards;\n}\n\n/* Keyframes for pop-effekt */\n@keyframes pop {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.2);\n }\n 100% {\n transform: scale(1.1);\n }\n}\n\n/* Keyframes for checkmark inn-animasjon */\n@keyframes checkmarkIn {\n 0% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n }\n 80% {\n transform: translate(-50%, -50%) scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n}\n\n/* Keyframes for checkmark ut-animasjon */\n@keyframes checkmarkOut {\n 0% {\n transform: translate(-50%, -50%) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, -50%) scale(0);\n opacity: 0;\n }\n}\n\n/* Keyframes for ripple-effekten */\n@keyframes ripple {\n 0% {\n width: 0;\n height: 0;\n opacity: 0.7;\n }\n 100% {\n width: 4em;\n height: 4em;\n opacity: 0;\n }\n}\n"}

brave-jellyfish-99

👁 实时预览

📝 源代码