{"html":"

\n \n \n \n

@nuxt/ui

\n The Intuitive UI Library powered by Reka UI and Tailwind CSS.\n

\n\n

\n \n \n \n \n \n 429K\n \n \n \n \n \n 5.2K\n \n

\n \n \n

\n","css":".card-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n}\n\n.plugin-card.futuristic {\n --glow-gradient: linear-gradient(90deg, #00dc82, #0ff, #ff00ff);\n --bg-dark: rgba(14, 17, 27, 0.8);\n --text-main: #e6edf3;\n --text-sub: #9ca3af;\n\n position: relative;\n padding: 1.5rem;\n border-radius: 1.25rem;\n background: var(--bg-dark);\n backdrop-filter: blur(1rem) saturate(1.4);\n color: var(--text-main);\n overflow: hidden;\n max-width: 26rem;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n transition:\n transform 0.4s ease,\n box-shadow 0.4s ease;\n}\n\n.plugin-card.futuristic::before {\n content: \"\";\n position: absolute;\n inset: 0;\n padding: 0.125rem;\n border-radius: inherit;\n background: var(--glow-gradient);\n background-size: 300% 300%;\n animation: borderFlow 6s linear infinite;\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n z-index: 0;\n}\n\n@keyframes borderFlow {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n.plugin-card.futuristic:hover {\n transform: translateY(-0.3rem) scale(1.02);\n box-shadow: 0 0 2rem rgba(0, 220, 130, 0.4);\n}\n\n.card-header {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.logo-svg {\n width: 2.5rem;\n height: auto;\n}\n\n.title {\n font-size: 1.25rem;\n font-weight: 700;\n background: linear-gradient(90deg, #00dc82, #0ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.description {\n font-size: 1rem;\n line-height: 1.5;\n color: var(--text-sub);\n}\n\n.card-footer {\n position: relative;\n z-index: 1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.stats {\n display: flex;\n gap: 1rem;\n font-size: 0.875rem;\n}\n\n.stat-item {\n display: flex;\n align-items: center;\n gap: 0.4em;\n color: var(--text-sub);\n}\n\n.stat-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.action-btn {\n width: 2rem;\n height: 2rem;\n background: rgba(33, 38, 45, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n cursor: pointer;\n color: var(--text-sub);\n transition:\n background 0.3s ease,\n transform 0.15s ease;\n}\n\n.action-btn:hover {\n background: rgba(0, 220, 130, 0.2);\n transform: scale(1.05);\n color: var(--text-main);\n}\n\n.action-btn svg {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.futuristic .title {\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n line-height: 1.4rem;\n}\n\n.futuristic:hover .title {\n border-right: 0.1em solid rgba(0, 220, 130, 0.75);\n animation:\n typewriter 2s steps(8) forwards,\n caretBlink 0.75s steps(1) infinite;\n}\n\n@keyframes typewriter {\n 0% {\n width: 0ch;\n }\n 100% {\n width: 8ch;\n }\n}\n\n@keyframes caretBlink {\n 0%,\n 100% {\n border-color: rgba(0, 220, 130, 0.75);\n }\n 50% {\n border-color: transparent;\n }\n}\n\n.futuristic:hover .title {\n animation:\n typewriter 2s steps(8) forwards,\n caretBlink 0.75s steps(1) infinite;\n animation-fill-mode: forwards;\n}\n\n.futuristic:hover .title {\n animation:\n typewriter 2s steps(8) forwards,\n caretBlink 0.75s steps(1) infinite;\n animation-fill-mode: forwards;\n}\n\n.futuristic:hover .title.finished {\n border-right: none;\n}\n\n.futuristic:hover .title {\n border-right: 0.15em solid rgba(0, 220, 130, 0.75);\n animation:\n typewriter 2s steps(8) forwards,\n caretBlink 0.75s steps(1) 0s infinite;\n}\n\n.futuristic:hover .title {\n animation:\n typewriter 2s steps(8) forwards,\n caretBlink 0.75s steps(1) 0s infinite,\n caretHide 0s linear 2s forwards;\n}\n\n@keyframes caretHide {\n to {\n border-right: none;\n }\n}\n"}

dry-termite-61

👁 实时预览

📝 源代码