{"html":"\n\n \n \n \n \n \n \n\n","css":"#lock {\n display: none;\n}\n.lock-label {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(80, 80, 80);\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.lock-wrapper {\n width: fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transform: rotate(-10deg);\n}\n.shackle {\n background-color: transparent;\n height: 9px;\n width: 14px;\n border-top-right-radius: 10px;\n border-top-left-radius: 10px;\n border-top: 3px solid white;\n border-left: 3px solid white;\n border-right: 3px solid white;\n transition: all 0.3s;\n}\n.lock-body {\n width: 15px;\n}\n#lock:checked + .lock-label .lock-wrapper .shackle {\n transform: rotateY(150deg) translateX(3px);\n transform-origin: right;\n}\n#lock:checked + .lock-label {\n background-color: rgb(167, 71, 245);\n}\n.lock-label:active {\n transform: scale(0.9);\n}\n"}

rare-duck-10

👁 实时预览

📝 源代码