{"html":"

\n \n

\n","css":".uiverse-logo-wrapper {\n --logo-green: #2bad72;\n --logo-dark-green: #1d8c59;\n --logo-glow: rgba(43, 173, 114, 0.6);\n --background: #121212;\n\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 300px;\n min-width: 300px;\n background: linear-gradient(to bottom, #121212, #0a1a0a);\n font-family: \"Arial\", sans-serif;\n overflow: hidden;\n position: relative;\n}\n\n.uiverse-logo-wrapper::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background:\n linear-gradient(90deg, rgba(43, 173, 114, 0.05) 1px, transparent 1px) 0 0 /\n 40px 40px,\n linear-gradient(0deg, rgba(43, 173, 114, 0.05) 1px, transparent 1px) 0 0 /\n 40px 40px;\n z-index: 0;\n}\n\n.uiverse-logo-button {\n position: relative;\n width: 200px;\n height: 200px;\n background: transparent;\n border: none;\n cursor: pointer;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: transform 0.3s ease;\n padding: 0;\n overflow: visible;\n z-index: 1;\n}\n\n.uiverse-logo-button:hover {\n transform: scale(1.05);\n}\n\n.uiverse-logo-button:active {\n transform: scale(0.95);\n}\n\n.uiverse-logo {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 2;\n}\n\n.uiverse-logo svg {\n width: 100%;\n height: 100%;\n filter: drop-shadow(0 0 10px var(--logo-glow));\n transition:\n filter 0.3s ease,\n transform 0.3s ease;\n animation:\n uiverse-initialLoad 1s ease-out,\n uiverse-oscillate 6s infinite ease-in-out;\n}\n\n.uiverse-logo svg path {\n fill: var(--logo-green);\n transition:\n fill 0.3s ease,\n filter 0.3s ease,\n transform 0.3s ease;\n}\n\n.uiverse-logo-button:hover svg {\n filter: drop-shadow(0 0 15px var(--logo-glow));\n transform: rotate(2deg);\n}\n\n.uiverse-logo-button:hover svg path {\n fill: #33cc80;\n}\n\n.uiverse-logo-button:active svg {\n filter: drop-shadow(0 0 20px var(--logo-glow)) brightness(1.2);\n transform: rotate(-2deg) scale(0.9);\n transition: transform 0.1s ease;\n}\n\n.uiverse-logo-button:active svg path {\n fill: #40e090;\n}\n\n.uiverse-logo-button:active svg path:first-child {\n transform: translateY(-3px);\n transition: transform 0.2s ease;\n}\n\n.uiverse-logo-button:active svg path:last-child {\n transform: translateY(3px);\n transition: transform 0.2s ease;\n}\n\n.uiverse-glow-effect {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(43, 173, 114, 0.2) 0%,\n rgba(43, 173, 114, 0) 70%\n );\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n}\n\n.uiverse-logo-button:hover .uiverse-glow-effect {\n opacity: 0.6;\n}\n\n.uiverse-logo-button:active .uiverse-glow-effect {\n opacity: 1;\n animation: uiverse-pulse 0.5s ease;\n}\n\n@keyframes uiverse-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.6;\n }\n 50% {\n transform: scale(1.2);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 0.6;\n }\n}\n\n.uiverse-logo-button::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle,\n rgba(43, 173, 114, 0.1) 0%,\n transparent 70%\n );\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 0;\n}\n\n.uiverse-logo-button:hover::before {\n opacity: 1;\n}\n\n.uiverse-logo-button:active::before {\n animation: uiverse-explode 0.6s ease-out;\n}\n\n@keyframes uiverse-explode {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n opacity: 0;\n }\n 40% {\n opacity: 1;\n }\n 100% {\n transform: translate(-50%, -50%) scale(2);\n opacity: 0;\n }\n}\n\n@keyframes uiverse-pathGlow {\n 0% {\n filter: drop-shadow(0 0 2px rgba(43, 173, 114, 0.8));\n }\n 30% {\n filter: drop-shadow(0 0 5px rgba(43, 173, 114, 0.8));\n }\n 60% {\n filter: drop-shadow(0 0 3px rgba(43, 173, 114, 0.8));\n }\n 100% {\n filter: drop-shadow(0 0 2px rgba(43, 173, 114, 0.8));\n }\n}\n\n.uiverse-logo svg path:nth-child(1) {\n animation: uiverse-pathGlow 3s infinite ease-in-out;\n}\n\n.uiverse-logo svg path:nth-child(2) {\n animation: uiverse-pathGlow 4s infinite ease-in-out;\n animation-delay: 1s;\n}\n\n@keyframes uiverse-initialLoad {\n 0% {\n opacity: 0;\n transform: scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes uiverse-oscillate {\n 0% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(1deg);\n }\n 50% {\n transform: rotate(0deg);\n }\n 75% {\n transform: rotate(-1deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.uiverse-logo-button::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(43, 173, 114, 0.2);\n border-radius: 50%;\n box-sizing: border-box;\n z-index: 1;\n opacity: 0;\n transition:\n opacity 0.3s ease,\n transform 0.3s ease;\n}\n\n.uiverse-logo-button:hover::after {\n opacity: 1;\n transform: scale(1.05);\n}\n"}

short-dingo-52

👁 实时预览

📝 源代码