{"html":"

\n \n \n

\n \n \n \n

\n \n

\n","css":".checkbox-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n margin: 0;\n}\n\n.checkbox {\n display: none;\n}\n\n.checkbox-label {\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n}\n\n.checkbox-flip {\n width: 60px;\n height: 60px;\n perspective: 1000px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transition: transform 0.4s ease;\n}\n\n.checkbox-front,\n.checkbox-back {\n width: 100%;\n height: 100%;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n backface-visibility: hidden;\n transition: transform 0.3s ease;\n}\n\n.checkbox-front {\n background: linear-gradient(135deg, #ff6347, #f76c6c);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transform: rotateY(0deg);\n}\n\n.checkbox-back {\n background: linear-gradient(135deg, #36b54a, #00c1d4);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transform: rotateY(180deg);\n}\n\n.checkbox-wrapper:hover .checkbox-flip {\n transform: scale(1.1);\n transition: transform 0.4s ease-out;\n}\n\n.checkbox:checked + .checkbox-label .checkbox-front {\n transform: rotateY(180deg);\n}\n\n.checkbox:checked + .checkbox-label .checkbox-back {\n transform: rotateY(0deg);\n}\n\n.checkbox:focus + .checkbox-label .checkbox-flip {\n box-shadow:\n 0 0 15px rgba(54, 181, 73, 0.7),\n 0 0 20px rgba(0, 193, 212, 0.4);\n transition: box-shadow 0.3s ease;\n}\n\n.icon-path {\n stroke: white;\n stroke-width: 2;\n fill: transparent;\n}\n"}

slippery-squid-60

👁 实时预览

📝 源代码