{"html":"\n","css":".menu {\n padding: 0.5rem;\n background-color: #fff;\n position: relative;\n display: flex;\n justify-content: center;\n border-radius: 15px;\n box-shadow: 0 10px 25px 0 rgba(#000, 0.075);\n}\n\n.link {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 70px;\n height: 50px;\n border-radius: 8px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n transform-origin: center left;\n transition: width 0.2s ease-in;\n text-decoration: none;\n color: inherit;\n &:before {\n position: absolute;\n z-index: -1;\n content: \"\";\n display: block;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n top: 0;\n transform: translateX(100%);\n transition: transform 0.2s ease-in;\n transform-origin: center right;\n background-color: #eee;\n }\n\n &:hover,\n &:focus {\n outline: 0;\n width: 130px;\n\n &:before,\n .link-title {\n transform: translateX(0);\n opacity: 1;\n }\n }\n}\n\n.link-icon {\n width: 28px;\n height: 28px;\n display: block;\n flex-shrink: 0;\n left: 18px;\n position: absolute;\n svg {\n width: 28px;\n height: 28px;\n }\n}\n\n.link-title {\n transform: translateX(100%);\n transition: transform 0.2s ease-in;\n transform-origin: center right;\n display: block;\n text-align: center;\n text-indent: 28px;\n width: 100%;\n}\n"}

soft-falcon-79

👁 实时预览

📝 源代码