{"html":"\n","css":".print-btn {\n width: 100px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n border: 1px solid rgb(213, 213, 213);\n border-radius: 10px;\n gap: 10px;\n font-size: 16px;\n cursor: pointer;\n overflow: hidden;\n font-weight: 500;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.065);\n transition: all 0.3s;\n}\n.printer-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 100%;\n}\n.printer-container {\n height: 50%;\n width: 100%;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n}\n\n.printer-container svg {\n width: 100%;\n height: auto;\n transform: translateY(4px);\n}\n.printer-page-wrapper {\n width: 100%;\n height: 50%;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n}\n.printer-page {\n width: 70%;\n height: 10px;\n border: 1px solid black;\n background-color: white;\n transform: translateY(0px);\n transition: all 0.3s;\n transform-origin: top;\n}\n.print-btn:hover .printer-page {\n height: 16px;\n background-color: rgb(239, 239, 239);\n}\n.print-btn:hover {\n background-color: rgb(239, 239, 239);\n}\n"}

orange-donkey-9

👁 实时预览

📝 源代码