{"html":"

\n \n

\n","css":".glowing-box {\n isolation: isolate;\n overflow: hidden;\n border-radius: 999px;\n display: inline-block;\n position: relative;\n transition: 0.4s cubic-bezier(0.77, -0.68, 0.62, 1.23);\n}\n\n.glowing-box:hover {\n transition: 0.4s cubic-bezier(0.77, -0.68, 0.62, 1.23);\n transform: scale(1.2);\n box-shadow: 1px 1px 20px 1px rgba(194, 156, 255, 0.05);\n}\n\n.glowing-box-active .glowing-box-animations,\n.glowing-box-active .glowing-box-borders-masker {\n opacity: 1;\n}\n.glowing-box-animations {\n opacity: 0;\n pointer-events: none;\n transition: 1s ease opacity;\n}\n.glowing-box-animations,\n.glowing-box-borders {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n}\n\n.glowing-box-animations:before,\n.glowing-box-borders:before {\n content: \"\";\n float: left;\n padding-top: 100%;\n}\n.glowing-box-animations {\n opacity: 0;\n pointer-events: none;\n transition: 1s ease opacity;\n}\n\n.glowing-box-glow {\n filter: blur(10px);\n opacity: 0.1;\n}\n\n.glowing-box-animations * {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.glowing-box-stars-masker {\n /* I used BASE 64 to add the background pattern to the URL mask, but you can download the background here: i.imgur.com/oOtlWvp.png */\n -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjgnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyOCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTQuMDUzNCAxNS43MzJDMTMuODQ0NCAxNS4yODMgMTQuMjg0OCAxNC44NDg5IDE0LjczMjYgMTUuMDUxQzE0LjgyOTYgMTUuMDk1OSAxNC45MDQzIDE1LjE3MDcgMTQuOTQ5IDE1LjI2OEMxNS4xNTA2IDE1LjcxNyAxNC43MTc3IDE2LjE1MTEgMTQuMjY5OCAxNS45NDlDMTQuMTcyOCAxNS45MDQxIDE0LjA5ODIgMTUuODI5MyAxNC4wNTM0IDE1LjczMlonIGZpbGw9J2JsYWNrJy8+PHBhdGggZD0nTTE4LjgwMDEgMTMuNTA5M0MxOS4wMDE2IDEzLjA2MDMgMTguNTY4NyAxMi42MjYzIDE4LjEyMDkgMTIuODI4M0MxOC4wMjM5IDEyLjg3MzIgMTcuOTQ5MiAxMi45NDgxIDE3LjkwNDUgMTMuMDQ1M0MxNy42OTU1IDEzLjQ5NDQgMTguMTM1OCAxMy45Mjg0IDE4LjU4MzcgMTMuNzI2NEMxOC42ODA3IDEzLjY4MTUgMTguNzU1MyAxMy42MDY2IDE4LjgwMDEgMTMuNTA5M1onIGZpbGw9J2JsYWNrJy8+PHBhdGggZD0nTTAuOTQ5MDQzIDIuNzMyQzEuMTUwNTcgMi4yODI5NyAwLjcxNzY2MyAxLjg0ODkxIDAuMjY5ODM2IDIuMDUwOTdDMC4xNzI4MDYgMi4wOTU4NyAwLjA5ODE2MiAyLjE3MDcxIDAuMDUzMzc5MyAyLjI2OEMtMC4xNTU2MDcgMi43MTcwMyAwLjI4NDc1OSAzLjE1MTA5IDAuNzMyNTg3IDIuOTQ5MDNDMC44Mjk2MTYgMi45MDQxMyAwLjkwNDI2IDIuODI5MjkgMC45NDkwNDMgMi43MzJaJyBmaWxsPSdibGFjaycvPjxwYXRoIGQ9J00yNi45NDg5IDcuNzMyQzI3LjE1MSA3LjI4Mjk3IDI2LjcxNjkgNi44NDg5MSAyNi4yNjc5IDcuMDUwOTdDMjYuMTcwNiA3LjA5NTg3IDI2LjA5NTggNy4xNzA3MSAyNi4wNTA4IDcuMjY4QzI1Ljg0ODggNy43MTcwMyAyNi4yODI4IDguMTUxMDkgMjYuNzMxOSA3Ljk0OTAzQzI2LjgyOTIgNy45MDQxMyAyNi45MDQgNy44MjkyOSAyNi45NDg5IDcuNzMyWicgZmlsbD0nYmxhY2snLz48cGF0aCBkPSdNMTMuMDUzNCA1LjczMkMxMi44NDQ0IDUuMjgyOTcgMTMuMjg0OCA0Ljg0ODkxIDEzLjczMjYgNS4wNTA5N0MxMy44Mjk2IDUuMDk1ODcgMTMuOTA0MyA1LjE3MDcxIDEzLjk0OSA1LjI2OEMxNC4xNTA2IDUuNzE3MDMgMTMuNzE3NyA2LjE1MTA5IDEzLjI2OTggNS45NDkwM0MxMy4xNzI4IDUuOTA0MTMgMTMuMDk4MiA1LjgyOTI5IDEzLjA1MzQgNS43MzJaJyBmaWxsPSdibGFjaycvPjxwYXRoIGQ9J00xMC4wNTM0IDE3LjczMkM5Ljg0NDM5IDE3LjI4MyAxMC4yODQ4IDE2Ljg0ODkgMTAuNzMyNiAxNy4wNTFDMTAuODI5NiAxNy4wOTU5IDEwLjkwNDMgMTcuMTcwNyAxMC45NDkgMTcuMjY4QzExLjE1MDYgMTcuNzE3IDEwLjcxNzcgMTguMTUxMSAxMC4yNjk4IDE3Ljk0OUMxMC4xNzI4IDE3LjkwNDEgMTAuMDk4MiAxNy44MjkzIDEwLjA1MzQgMTcuNzMyWicgZmlsbD0nYmxhY2snLz48cGF0aCBkPSdNMTUuMDUzNCAyMS43MzJDMTQuODQ0NCAyMS4yODMgMTUuMjg0OCAyMC44NDg5IDE1LjczMjYgMjEuMDUxQzE1LjgyOTYgMjEuMDk1OSAxNS45MDQzIDIxLjE3MDcgMTUuOTQ5IDIxLjI2OEMxNi4xNTA2IDIxLjcxNyAxNS43MTc3IDIyLjE1MTEgMTUuMjY5OCAyMS45NDlDMTUuMTcyOCAyMS45MDQxIDE1LjA5ODIgMjEuODI5MyAxNS4wNTM0IDIxLjczMlonIGZpbGw9J2JsYWNrJy8+PC9zdmc+Cg==);\n mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjgnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyOCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTQuMDUzNCAxNS43MzJDMTMuODQ0NCAxNS4yODMgMTQuMjg0OCAxNC44NDg5IDE0LjczMjYgMTUuMDUxQzE0LjgyOTYgMTUuMDk1OSAxNC45MDQzIDE1LjE3MDcgMTQuOTQ5IDE1LjI2OEMxNS4xNTA2IDE1LjcxNyAxNC43MTc3IDE2LjE1MTEgMTQuMjY5OCAxNS45NDlDMTQuMTcyOCAxNS45MDQxIDE0LjA5ODIgMTUuODI5MyAxNC4wNTM0IDE1LjczMlonIGZpbGw9J2JsYWNrJy8+PHBhdGggZD0nTTE4LjgwMDEgMTMuNTA5M0MxOS4wMDE2IDEzLjA2MDMgMTguNTY4NyAxMi42MjYzIDE4LjEyMDkgMTIuODI4M0MxOC4wMjM5IDEyLjg3MzIgMTcuOTQ5MiAxMi45NDgxIDE3LjkwNDUgMTMuMDQ1M0MxNy42OTU1IDEzLjQ5NDQgMTguMTM1OCAxMy45Mjg0IDE4LjU4MzcgMTMuNzI2NEMxOC42ODA3IDEzLjY4MTUgMTguNzU1MyAxMy42MDY2IDE4LjgwMDEgMTMuNTA5M1onIGZpbGw9J2JsYWNrJy8+PHBhdGggZD0nTTAuOTQ5MDQzIDIuNzMyQzEuMTUwNTcgMi4yODI5NyAwLjcxNzY2MyAxLjg0ODkxIDAuMjY5ODM2IDIuMDUwOTdDMC4xNzI4MDYgMi4wOTU4NyAwLjA5ODE2MiAyLjE3MDcxIDAuMDUzMzc5MyAyLjI2OEMtMC4xNTU2MDcgMi43MTcwMyAwLjI4NDc1OSAzLjE1MTA5IDAuNzMyNTg3IDIuOTQ5MDNDMC44Mjk2MTYgMi45MDQxMyAwLjkwNDI2IDIuODI5MjkgMC45NDkwNDMgMi43MzJaJyBmaWxsPSdibGFjaycvPjxwYXRoIGQ9J00yNi45NDg5IDcuNzMyQzI3LjE1MSA3LjI4Mjk3IDI2LjcxNjkgNi44NDg5MSAyNi4yNjc5IDcuMDUwOTdDMjYuMTcwNiA3LjA5NTg3IDI2LjA5NTggNy4xNzA3MSAyNi4wNTA4IDcuMjY4QzI1Ljg0ODggNy43MTcwMyAyNi4yODI4IDguMTUxMDkgMjYuNzMxOSA3Ljk0OTAzQzI2LjgyOTIgNy45MDQxMyAyNi45MDQgNy44MjkyOSAyNi45NDg5IDcuNzMyWicgZmlsbD0nYmxhY2snLz48cGF0aCBkPSdNMTMuMDUzNCA1LjczMkMxMi44NDQ0IDUuMjgyOTcgMTMuMjg0OCA0Ljg0ODkxIDEzLjczMjYgNS4wNTA5N0MxMy44Mjk2IDUuMDk1ODcgMTMuOTA0MyA1LjE3MDcxIDEzLjk0OSA1LjI2OEMxNC4xNTA2IDUuNzE3MDMgMTMuNzE3NyA2LjE1MTA5IDEzLjI2OTggNS45NDkwM0MxMy4xNzI4IDUuOTA0MTMgMTMuMDk4MiA1LjgyOTI5IDEzLjA1MzQgNS43MzJaJyBmaWxsPSdibGFjaycvPjxwYXRoIGQ9J00xMC4wNTM0IDE3LjczMkM5Ljg0NDM5IDE3LjI4MyAxMC4yODQ4IDE2Ljg0ODkgMTAuNzMyNiAxNy4wNTFDMTAuODI5NiAxNy4wOTU5IDEwLjkwNDMgMTcuMTcwNyAxMC45NDkgMTcuMjY4QzExLjE1MDYgMTcuNzE3IDEwLjcxNzcgMTguMTUxMSAxMC4yNjk4IDE3Ljk0OUMxMC4xNzI4IDE3LjkwNDEgMTAuMDk4MiAxNy44MjkzIDEwLjA1MzQgMTcuNzMyWicgZmlsbD0nYmxhY2snLz48cGF0aCBkPSdNMTUuMDUzNCAyMS43MzJDMTQuODQ0NCAyMS4yODMgMTUuMjg0OCAyMC44NDg5IDE1LjczMjYgMjEuMDUxQzE1LjgyOTYgMjEuMDk1OSAxNS45MDQzIDIxLjE3MDcgMTUuOTQ5IDIxLjI2OEMxNi4xNTA2IDIxLjcxNyAxNS43MTc3IDIyLjE1MTEgMTUuMjY5OCAyMS45NDlDMTUuMTcyOCAyMS45MDQxIDE1LjA5ODIgMjEuODI5MyAxNS4wNTM0IDIxLjczMlonIGZpbGw9J2JsYWNrJy8+PC9zdmc+Cg==);\n -webkit-mask-repeat: repeat;\n mask-repeat: repeat;\n -webkit-mask-size: 13%;\n mask-size: 13%;\n}\n\n.glowing-box-animations * {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.glowing-box-borders,\n.glowing-box-glow,\n.glowing-box-stars {\n animation: borderTurn var(--animation-speed) infinite linear;\n background-image: conic-gradient(\n from 0 at 50% 50%,\n rgba(255, 255, 255, 0.5) 0deg,\n rgba(255, 255, 255, 0) 60deg,\n rgba(255, 255, 255, 0) 310deg,\n rgba(255, 255, 255, 0.5) 360deg\n );\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.glowing-box-animations * {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.glowing-box-animations:after,\n.glowing-box-borders:after {\n clear: both;\n content: \"\";\n display: block;\n}\n\n.glowing-box-active .glowing-box-animations,\n.glowing-box-active .glowing-box-borders-masker {\n opacity: 1;\n}\n.glowing-box-borders-masker {\n border-radius: 999px;\n content: \"\";\n\n inset: 0;\n left: 0;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: xor;\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n opacity: 0;\n padding: 0.5px;\n pointer-events: none;\n position: absolute;\n top: 0;\n transition: 1s ease opacity;\n}\n\n.glowing-box-borders {\n animation-name: borderTurnWithTranslate;\n}\n\n.glowing-box-animations,\n.glowing-box-borders {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n}\n\n.glowing-box-animations:before,\n.glowing-box-borders:before {\n content: \"\";\n float: left;\n padding-top: 100%;\n}\n\n.glowing-box-animations:after,\n.glowing-box-borders:after {\n clear: both;\n content: \"\";\n display: block;\n}\n\n.glowing-box-button {\n background: radial-gradient(\n 107.5% 107.5% at 50% 215%,\n rgba(255, 255, 255, 0.24) 0%,\n rgba(255, 255, 255, 0) 100%\n ),\n rgba(255, 255, 255, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 999px;\n cursor: pointer;\n padding: 7px 24px;\n position: relative;\n z-index: 1;\n}\n.glowing-box-button {\n font-feature-settings:\n \"cv06\" on,\n \"calt\" off,\n \"liga\" off;\n font-size: 14px;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 24px;\n}\n\n.glowing-box .glowing-box-button {\n overflow: visible;\n}\nglowing-box-button {\n background-color: transparent;\n border: 1px solid transparent;\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n}\n.glowing-box .glowing-box .glowing-box-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n cursor: pointer;\n}\n\n.glowing-box-button:after {\n background: radial-gradient(\n 73% 117% at 50% 126%,\n rgb(38 3 95 / 82%) 0%,\n rgb(255 255 255 / 0%) 100%\n );\n border-radius: 999px;\n content: \"\";\n height: calc(100% + 4px);\n left: -2px;\n opacity: 0;\n position: absolute;\n top: -2px;\n transition: 1s all;\n width: calc(100% + 4px);\n}\n\n.glowing-box-button .glowing-span {\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.3) 8.85%,\n #ffffff 100%\n );\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n -webkit-text-fill-color: transparent;\n display: block;\n}\n\n.glowing-box-button:hover:after {\n opacity: 0.7;\n}\n\n@keyframes borderTurnWithTranslate {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n@keyframes borderTurn {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n"}

hot-quail-23

👁 实时预览

📝 源代码