{"html":"\n","css":"button {\n font-weight: bold;\n color: white;\n border-radius: 2rem;\n cursor: pointer;\n width: 95.02px;\n height: 42.66px;\n border: none;\n background-color: #3653f8;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nbutton .span-mother {\n display: flex;\n overflow: hidden;\n}\n\nbutton:hover .span-mother {\n position: absolute;\n}\n\nbutton:hover .span-mother span {\n transform: translateY(1.2em);\n}\n\nbutton .span-mother span:nth-child(1) {\n transition: 0.2s;\n}\n\nbutton .span-mother span:nth-child(2) {\n transition: 0.3s;\n}\n\nbutton .span-mother span:nth-child(3) {\n transition: 0.4s;\n}\n\nbutton .span-mother span:nth-child(4) {\n transition: 0.5s;\n}\n\nbutton .span-mother span:nth-child(5) {\n transition: 0.6s;\n}\n\nbutton .span-mother span:nth-child(6) {\n transition: 0.7s;\n}\n\nbutton .span-mother2 {\n display: flex;\n position: absolute;\n overflow: hidden;\n}\n\nbutton .span-mother2 span {\n transform: translateY(-1.2em);\n}\n\nbutton:hover .span-mother2 span {\n transform: translateY(0);\n}\n\nbutton .span-mother2 span {\n transition: 0.2s;\n}\n\nbutton .span-mother2 span:nth-child(2) {\n transition: 0.3s;\n}\n\nbutton .span-mother2 span:nth-child(3) {\n transition: 0.4s;\n}\n\nbutton .span-mother2 span:nth-child(4) {\n transition: 0.5s;\n}\n\nbutton .span-mother2 span:nth-child(5) {\n transition: 0.6s;\n}\n\nbutton .span-mother2 span:nth-child(6) {\n transition: 0.7s;\n}\n"}

giant-deer-25

👁 实时预览

📝 源代码