{"html":"\n","css":".button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px 32px;\n background-color: #006aff;\n border: 8px solid #c0dfff;\n color: white;\n gap: 8px;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.text {\n font-size: 1.7em;\n font-weight: 700;\n letter-spacing: 1px;\n}\n.svg {\n padding-top: 5px;\n height: 100%;\n width: fit-content;\n}\n.svg svg {\n width: 50px;\n height: 30px;\n}\n.button:hover {\n border: 8px solid #b1d8ff;\n background-color: #1b7aff;\n}\n.button:active {\n border: 5px solid #c0dfff;\n}\n.button:hover .svg svg {\n animation: jello-vertical 0.9s both;\n transform-origin: left;\n}\n\n@keyframes jello-vertical {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n"}

curly-crab-71

👁 实时预览

📝 源代码