{"html":"

\n \n\n \n\n \n\n

\n","css":".action-wrap {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 9999px;\n}\n\n.backdrop {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 9999px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n.backdrop::before {\n content: \"\";\n position: absolute;\n height: 10.5rem;\n width: 10.5rem;\n border-radius: 9999px;\n background: linear-gradient(144deg, #af40ff, #4f46e5);\n animation: rotate 1.5s linear infinite;\n}\n.backdrop::after {\n content: \"\";\n position: absolute;\n height: 100%;\n width: 100%;\n backdrop-filter: blur(8px);\n border-radius: 9999px;\n z-index: 1;\n}\n\n.action {\n --sz-light-hover: 60px;\n --rd-light-hover: 9999px;\n --l-light-hover: 14px;\n --cl-light: #0000;\n --cr-light: #af40ff;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n transform,\n color,\n background-color,\n 300ms ease;\n height: 3.5rem;\n width: 3.5rem;\n border: none;\n color: #444444;\n background: none transparent;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 9999px;\n}\n\n.action-icon {\n height: 100%;\n width: 100%;\n position: relative;\n z-index: 9;\n padding: 0.5rem;\n border-radius: 9999px;\n background-color: #f1f1f1;\n transition:\n transform,\n color,\n background,\n 300ms ease;\n}\n\n.action-content {\n --sz-light-hover: 100px;\n --rd-light-hover: 6px;\n --l-light-hover: 0px;\n --cl-light: #fff;\n --cr-light: #af40ff;\n transition:\n transform,\n 400ms ease;\n opacity: 0;\n font-size: 1.25rem;\n line-height: 1.5;\n background-color: inherit;\n border-radius: 6px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n width: max-content;\n height: 1.75rem;\n padding: 8px 1px;\n position: absolute;\n left: 0;\n z-index: -1;\n border: 1px solid #ccc;\n}\n\n.action-content::before {\n content: attr(data-content);\n transition:\n transform,\n 300ms ease;\n text-transform: capitalize;\n font-size: medium;\n font-weight: 600;\n z-index: 1;\n transform: translateX(-100%);\n background-color: #fff;\n border-radius: calc(var(--rd-light-hover) - 2px);\n padding-inline: 4px;\n}\n\n.action::after,\n.action-content::after {\n content: \"\";\n opacity: 0;\n position: absolute;\n border-radius: var(--rd-light-hover);\n transition: all 50ms ease 200ms;\n background: conic-gradient(\n from 45deg at 50% 50%,\n var(--cl-light),\n var(--cr-light),\n var(--cl-light),\n var(--cl-light),\n var(--cl-light),\n var(--cr-light),\n var(--cl-light),\n var(--cl-light),\n var(--cl-light)\n );\n}\n\n.action:hover .action-icon {\n color: #000;\n background-color: #fff;\n transform: scale(1.4) translate3d(12px, 0px, 12px);\n}\n\n.action:hover::after,\n.action-content::after {\n height: var(--sz-light-hover);\n width: var(--sz-light-hover);\n left: var(--l-light-hover);\n opacity: 1;\n animation: rotate 4s linear infinite;\n}\n@keyframes rotate {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(1turn);\n }\n}\n\n.action:hover .action-content {\n color: #000;\n background-color: #fff;\n opacity: 1;\n width: max-content;\n left: calc(100% + 24px);\n z-index: 9;\n}\n\n.action:hover .action-content::before {\n transform: translateX(0px);\n}\n"}

happy-zebra-96

👁 实时预览

📝 源代码