{"html":"

\n \n \n

\n \n

\n","css":".toggle-container {\n position: relative;\n width: 160px;\n height: 80px;\n}\n\n.toggle-input {\n display: none;\n}\n\n.toggle-label {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 140px;\n height: 60px;\n background: #ff4c4c;\n border-radius: 30px;\n box-shadow: 0 5px #b93737;\n transition: background 0.3s ease-in-out;\n cursor: pointer;\n padding: 0 10px;\n}\n\n.face {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease-in-out;\n}\n\n.eye {\n position: relative;\n width: 10px;\n height: 10px;\n background: white;\n border-radius: 50%;\n transition: all 0.3s ease-in-out;\n}\n\n.smile {\n position: absolute;\n bottom: 30px;\n left: 50%;\n width: 40px;\n height: 20px;\n border: 2px solid transparent;\n border-radius: 50%;\n transform: translateX(-50%);\n transition: all 0.3s ease-in-out;\n}\n\n.toggle-switch {\n position: relative;\n width: 35px;\n height: 20px;\n background: white;\n border-radius: 10px;\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);\n margin: 0 10px;\n z-index: 1;\n}\n\n.toggle-switch:before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 15px;\n background: #ff4c4c;\n border-radius: 50%;\n transition: all 0.3s ease-in-out;\n top: 50%;\n left: 3px;\n transform: translateY(-50%);\n}\n\n.toggle-input:checked + .toggle-label .toggle-switch:before {\n background: #28a745;\n left: 16px;\n}\n\n.toggle-input:checked + .toggle-label .smile {\n border-bottom-color: #fff;\n border-top: none;\n bottom: 10px;\n}\n\n.toggle-input:not(:checked) + .toggle-label .smile {\n border-top-color: #fff;\n border-bottom: none;\n bottom: 0;\n}\n\n.toggle-input:checked + .toggle-label {\n background: #ced10a;\n box-shadow: 0 5px #74c027;\n}\n\n.toggle-input:not(:checked) + .toggle-label {\n background: #252422;\n box-shadow: 0 5px #484d48;\n bottom: 5px;\n}\n\n.toggle-label:hover .eye {\n width: 20px;\n height: 20px;\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n height: 10px;\n }\n 95% {\n height: 2px;\n }\n}\n\n.left-eye {\n animation: blink 3s infinite;\n}\n\n.right-eye {\n animation: blink 3s infinite;\n}\n"}

tiny-bullfrog-79

👁 实时预览

📝 源代码