{"html":"

\n \n\n

\n\n

Interactive

Vibrant Frame

\n\n

Highlight your content with style and energy.

\n","css":".main-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.svg-container {\n position: absolute;\n}\n\n.card-container {\n padding: 2px;\n border-radius: 24px;\n position: relative;\n background: linear-gradient(\n -30deg,\n oklch(0.4 0.2 280),\n transparent,\n oklch(0.4 0.2 280)\n ),\n linear-gradient(to bottom, oklch(0.185 0 0), oklch(0.185 0 0));\n overflow: hidden;\n}\n\n.inner-container {\n position: relative;\n}\n\n.border-outer {\n border: 2px solid rgba(72, 87, 221, 0.5);\n border-radius: 24px;\n padding-right: 4px;\n padding-bottom: 4px;\n}\n\n.main-card {\n width: 350px;\n height: 500px;\n border-radius: 24px;\n border: 2px solid #6348dd;\n margin-top: -4px;\n margin-left: -4px;\n filter: url(#turbulent-displace);\n}\n\n.glow-layer-1 {\n border: 2px solid rgba(221, 132, 72, 0.6);\n border-radius: 24px;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n filter: blur(1px);\n}\n\n.glow-layer-2 {\n border: 2px solid oklch(0.63 0.16 280);\n border-radius: 24px;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n filter: blur(4px);\n}\n\n.overlay-1,\n.overlay-2 {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 24px;\n mix-blend-mode: overlay;\n transform: scale(1.1);\n filter: blur(16px);\n background: linear-gradient(\n -30deg,\n white,\n transparent 30%,\n transparent 70%,\n white\n );\n}\n\n.overlay-1 {\n opacity: 1;\n}\n\n.overlay-2 {\n opacity: 0.5;\n}\n\n.background-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 24px;\n filter: blur(32px);\n transform: scale(1.1);\n opacity: 0.3;\n z-index: -1;\n background: linear-gradient(\n -30deg,\n oklch(0.63 0.16 280),\n transparent,\n #6348dd\n );\n}\n\n.content-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.content-top {\n display: flex;\n flex-direction: column;\n padding: 48px;\n padding-bottom: 16px;\n height: 100%;\n}\n\n.content-bottom {\n display: flex;\n flex-direction: column;\n padding: 48px;\n padding-top: 16px;\n}\n\n.scrollbar-glass {\n background: radial-gradient(\n 47.2% 50% at 50.39% 88.37%,\n rgba(255, 255, 255, 0.12) 0%,\n rgba(255, 255, 255, 0) 100%\n ),\n rgba(255, 255, 255, 0.04);\n position: relative;\n transition: background 0.3s ease;\n border-radius: 14px;\n width: fit-content;\n height: fit-content;\n padding: 8px 16px;\n text-transform: uppercase;\n font-weight: bold;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.8);\n}\n\n.scrollbar-glass:hover {\n background: radial-gradient(\n 47.2% 50% at 50.39% 88.37%,\n rgba(255, 255, 255, 0.12) 0%,\n rgba(255, 255, 255, 0) 100%\n ),\n rgba(255, 255, 255, 0.08);\n}\n\n.scrollbar-glass::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 1px;\n background: linear-gradient(\n 150deg,\n rgba(255, 255, 255, 0.48) 16.73%,\n rgba(255, 255, 255, 0.08) 30.2%,\n rgba(255, 255, 255, 0.08) 68.2%,\n rgba(255, 255, 255, 0.6) 81.89%\n );\n border-radius: inherit;\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 pointer-events: none;\n}\n\n.title {\n font-size: 36px;\n font-weight: 500;\n margin-top: auto;\n color: #fff;\n}\n\n.description {\n opacity: 0.5;\n color: #fff;\n}\n\n.divider {\n margin-top: auto;\n border: none;\n height: 1px;\n background-color: currentColor;\n opacity: 0.2;\n mask-image: linear-gradient(to right, transparent, black, transparent);\n -webkit-mask-image: linear-gradient(\n to right,\n transparent,\n black,\n transparent\n );\n}\n"}

thin-earwig-59

👁 实时预览

📝 源代码