{"html":"

\n \n \n \n

octo_cat

UI DEVELOPER

\n REPOSITORIES\n 128\n

\n FOLLOWERS\n 42k\n

\n","css":"/* --- Root Variables & Wrapper --- */\n.glitch-profile-wrapper {\n --bg-color: #0d0d0d;\n --primary-color: #00f2ea;\n --secondary-color: #a855f7;\n --text-color: #e5e5e5;\n --font-family: \"Fira Code\", Consolas, \"Courier New\", Courier, monospace;\n --glitch-anim-duration: 0.4s;\n\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: var(--font-family);\n padding: 1rem;\n}\n\n/* --- Card Structure --- */\n.glitch-card {\n position: relative;\n background-color: var(--bg-color);\n width: 19rem;\n border-radius: 1rem;\n border: 1px solid rgba(0, 242, 234, 0.2);\n box-shadow:\n 0 0 1.5rem rgba(0, 242, 234, 0.1),\n inset 0 0 1rem rgba(0, 0, 0, 0.5);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.card-header-visual {\n height: 3.5rem;\n background: linear-gradient(\n 45deg,\n rgba(0, 242, 234, 0.1),\n rgba(13, 13, 13, 0.8)\n ),\n radial-gradient(circle, rgba(168, 85, 247, 0.05) 0%, transparent 70%);\n border-bottom: 1px solid rgba(0, 242, 234, 0.1);\n}\n\n/* --- Avatar --- */\n.profile-avatar {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 0.75rem;\n z-index: 2;\n width: 5.5rem;\n height: 5.5rem;\n background: var(--bg-color);\n border-radius: 50%;\n padding: 0.9rem;\n box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);\n border: 1px solid rgba(0, 242, 234, 0.3);\n transition: background-color 0.5s ease-in-out;\n}\n\n.octocat-svg {\n width: 100%;\n height: 100%;\n fill: var(--primary-color);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n filter: drop-shadow(0 0 10px rgba(0, 242, 234, 0.3));\n}\n\n.profile-avatar:hover {\n background-color: var(--primary-color);\n}\n.profile-avatar:hover .octocat-svg {\n fill: var(--bg-color);\n transform: scale(1.1) rotate(-5deg);\n}\n\n/* --- Card Body --- */\n.card-body {\n padding: 1.1rem;\n padding-top: 0;\n background-color: var(--bg-color);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.profile-body {\n align-items: center;\n text-align: center;\n padding-top: 2.75rem;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.profile-info {\n margin-bottom: 1.1rem;\n}\n.profile-name {\n font-size: 1.6rem;\n font-weight: 700;\n color: var(--text-color);\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin: 0;\n position: relative;\n cursor: pointer;\n}\n.profile-title {\n font-size: 0.75rem;\n color: var(--primary-color);\n opacity: 0.8;\n margin: 0.25rem 0 0 0;\n letter-spacing: 0.1em;\n}\n\n/* --- GitHub Stats --- */\n.profile-stats {\n width: 100%;\n margin-top: auto;\n padding-top: 1rem;\n border-top: 1px solid rgba(0, 242, 234, 0.2);\n display: flex;\n justify-content: space-around;\n}\n.stat-item {\n text-align: center;\n cursor: pointer;\n}\n.stat-label {\n font-size: 0.65rem;\n font-weight: 700;\n color: var(--text-color);\n opacity: 0.6;\n letter-spacing: 0.1em;\n}\n.stat-value {\n display: block;\n font-size: 1.4rem;\n font-weight: 700;\n color: var(--primary-color);\n margin-top: 0.25rem;\n position: relative;\n}\n\n/* --- Button --- */\n.submit-btn {\n display: block;\n width: 100%;\n margin-top: 1.1rem;\n padding: 0.7em 1em;\n background-color: transparent;\n border: 2px solid var(--primary-color);\n color: var(--primary-color);\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n cursor: pointer;\n position: relative;\n transition: all 0.3s;\n overflow: hidden;\n text-align: center;\n text-decoration: none;\n}\n\n.submit-btn:hover,\n.submit-btn:focus {\n background-color: var(--primary-color);\n color: var(--bg-color);\n box-shadow: 0 0 1.5rem var(--primary-color);\n outline: none;\n}\n\n.submit-btn:active {\n transform: scale(0.97);\n}\n.submit-btn .btn-text {\n position: relative;\n z-index: 1;\n transition: opacity 0.2s ease;\n}\n\n/* --- Glitch Effects --- */\n.profile-name:hover::before,\n.profile-name:hover::after,\n.stat-value:hover::before,\n.stat-value:hover::after,\n.submit-btn:hover::before,\n.submit-btn:hover::after,\n.submit-btn:focus::before,\n.submit-btn:focus::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.profile-name:hover,\n.stat-item:hover .stat-value {\n color: transparent;\n}\n.submit-btn:hover .btn-text {\n opacity: 0;\n}\n.profile-name:hover::before,\n.stat-value:hover::before,\n.submit-btn:hover::before,\n.submit-btn:focus::before {\n opacity: 1;\n color: var(--secondary-color);\n animation: glitch-anim var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n.profile-name:hover::after,\n.stat-value:hover::after {\n background-color: var(--bg-color);\n color: var(--primary-color);\n animation: glitch-anim var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;\n}\n\n.submit-btn:hover::after,\n.submit-btn:focus::after {\n color: var(--bg-color);\n animation: glitch-anim var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;\n}\n\n@keyframes glitch-anim {\n 0% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n 20% {\n transform: translate(-0.3rem, 0.15rem);\n clip-path: inset(50% 0 20% 0);\n }\n 40% {\n transform: translate(0.15rem, -0.1rem);\n clip-path: inset(20% 0 60% 0);\n }\n 60% {\n transform: translate(-0.25rem, 0.1rem);\n clip-path: inset(80% 0 5% 0);\n }\n 80% {\n transform: translate(0.25rem, -0.15rem);\n clip-path: inset(30% 0 45% 0);\n }\n 100% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n}\n"}

blue-otter-17

👁 实时预览

📝 源代码