{"html":"\n","css":".pay-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #04264a;\n gap: 5px;\n border: none;\n padding: 10px 10px;\n border-radius: 12px;\n color: white;\n font-size: 25px;\n font-weight: bold;\n width: 140px;\n height: 60px;\n cursor: pointer;\n position: relative;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n}\n.pay-btn:focus {\n width: 60px;\n height: 60px;\n}\n.pay-btn .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 5px;\n font-size: 10px;\n width: 35px;\n height: 35px;\n}\n.pay-btn:hover {\n background-color: #04376e;\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);\n}\n\n#fingerprint-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: none;\n justify-content: center;\n align-items: center;\n}\n\n.pay-btn:focus span {\n display: none;\n}\n\n.pay-btn:focus #fingerprint-container {\n display: flex;\n}\n\n.primary,\n.secondary {\n stroke-dasharray: 1000;\n stroke-dashoffset: 2000;\n animation: draw 3s ease-in-out forwards;\n}\n\n.checkmark,\n.primary_check {\n animation: showCheckmark 1s ease-in-out forwards;\n animation-delay: 3s;\n width: 500px;\n opacity: 0;\n}\n\n.pay-btn:focus #fingerprint-container .checkmark,\n.primary_check {\n opacity: 0;\n}\n\n@keyframes draw {\n to {\n stroke-dashoffset: 0;\n display: none;\n }\n}\n\n@keyframes showCheckmark {\n to {\n opacity: 1;\n }\n}\n"}

fast-crab-36

👁 实时预览

📝 源代码