{"html":"\n","css":".menu {\n font-size: 16px;\n line-height: 1.6;\n color: #000000;\n width: fit-content;\n display: flex;\n list-style: none;\n}\n\n.menu a {\n text-decoration: none;\n color: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.menu .link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 12px 36px;\n border-radius: 16px;\n overflow: hidden;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.menu .link::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #0a3cff;\n z-index: -1;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.menu .link svg {\n width: 14px;\n height: 14px;\n fill: #000000;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.menu .item {\n position: relative;\n}\n\n.menu .item .submenu {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: absolute;\n top: 100%;\n border-radius: 0 0 16px 16px;\n left: 0;\n width: 100%;\n overflow: hidden;\n border: 1px solid #cccccc;\n opacity: 0;\n visibility: hidden;\n transform: translateY(-12px);\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 1;\n pointer-events: none;\n list-style: none;\n}\n\n.menu .item:hover .submenu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n pointer-events: auto;\n border-top: transparent;\n border-color: #0a3cff;\n}\n\n.menu .item:hover .link {\n color: #ffffff;\n border-radius: 16px 16px 0 0;\n}\n\n.menu .item:hover .link::after {\n transform: scaleX(1);\n transform-origin: right;\n}\n\n.menu .item:hover .link svg {\n fill: #ffffff;\n transform: rotate(-180deg);\n}\n\n.submenu .submenu-item {\n width: 100%;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.submenu .submenu-link {\n display: block;\n padding: 12px 24px;\n width: 100%;\n position: relative;\n text-align: center;\n transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.submenu .submenu-item:last-child .submenu-link {\n border-bottom: none;\n}\n\n.submenu .submenu-link::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n transform: scaleX(0);\n width: 100%;\n height: 100%;\n background-color: #0a3cff;\n z-index: -1;\n transform-origin: left;\n transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.submenu .submenu-link:hover:before {\n transform: scaleX(1);\n transform-origin: right;\n}\n\n.submenu .submenu-link:hover {\n color: #ffffff;\n}\n"}

loud-puma-8

👁 实时预览

📝 源代码