{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":".switch input {\n opacity: 0;\n width: 0;\n height: 0;\n display: none;\n}\n.switch {\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n cursor: pointer;\n}\n.wrapper {\n width: 35px;\n height: 35px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: all 0.2s;\n}\n.row {\n width: 100%;\n height: 50%;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n}\n.row-bottom {\n align-items: flex-end;\n}\n.dot {\n width: 8px;\n height: 8px;\n border: 2px solid black;\n border-radius: 50%;\n transition: all 0.2s;\n}\n.row-horizontal {\n position: absolute;\n width: 100%;\n height: fit-content;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: all 0.2s;\n}\n.row-vertical {\n position: absolute;\n width: fit-content;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n transition: all 0.2s;\n}\n\n.switch:hover .wrapper .row-horizontal {\n width: 100px;\n}\n.switch:hover .wrapper .row-vertical {\n height: 100px;\n}\n\n.switch:hover .wrapper .row-vertical .middle-dot {\n border-radius: 5px;\n height: 35px;\n}\n.switch:hover .wrapper .row-horizontal .middle-dot-horizontal {\n border-radius: 5px;\n width: 35px;\n}\n.switch input:checked + .wrapper {\n transform: rotate(45deg) scale(1.2);\n}\n.switch input:checked + .wrapper .row-vertical {\n height: 100px;\n}\n.switch input:checked + .wrapper .row-horizontal {\n width: 100px;\n}\n\n.switch input:checked + .wrapper .row-vertical .middle-dot {\n border-radius: 5px;\n height: 35px;\n}\n.switch input:checked + .wrapper .row-horizontal .middle-dot-horizontal {\n border-radius: 5px;\n width: 35px;\n}\n"}

shy-emu-7

👁 实时预览

📝 源代码