{"html":"

\n \n \n

\n \n \n \n \n

\n \n \n \n

\n \n \n \n \n

\n \n \n \n

\n \n \n \n \n

\n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.label {\n position: relative;\n margin: 0 10px;\n cursor: pointer;\n}\n\n.button {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n}\n\n.button::before,\n.button::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n transition: all 0.3s ease;\n}\n\n.button::before {\n background-color: rgba(255, 255, 255, 0.15);\n transform: scale(0.9);\n opacity: 0;\n}\n\n.button::after {\n background-color: rgba(0, 0, 0, 0.1);\n transform: scale(1.1);\n opacity: 0;\n}\n\n.label input {\n display: none;\n}\n\n.label input:checked + .button {\n background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);\n box-shadow: 0 10px 20px rgba(255, 87, 34, 0.4);\n}\n\n.label input:checked + .button::before {\n transform: scale(1.2);\n opacity: 1;\n}\n\n.label input:checked + .button::after {\n animation: pulse 1.5s infinite;\n}\n\n@keyframes pulse {\n 0% {\n transform: scale(1.1);\n opacity: 1;\n }\n\n 50% {\n transform: scale(1.5);\n opacity: 0;\n }\n\n 100% {\n transform: scale(1.1);\n opacity: 1;\n }\n}\n\n.shadow {\n position: absolute;\n bottom: 5px;\n width: 100%;\n height: 10px;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.front {\n position: relative;\n z-index: 1;\n}\n"}

fat-termite-40

👁 实时预览

📝 源代码