{"html":"

\n \n \n \n \n\n","css":".darkmatter-btn {\n background: #000;\n border: 1px solid #333;\n color: #b56aff;\n padding: 15px 40px;\n border-radius: 8px;\n font-size: 16px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n z-index: 1;\n}\n\n.darkmatter-btn:hover {\n box-shadow: 0 0 15px rgba(181, 106, 255, 0.4);\n color: #fff;\n}\n\n.darkmatter-btn::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n rgba(181, 106, 255, 0.1) 0%,\n transparent 70%\n );\n transform: scale(0);\n transition: transform 0.6s ease;\n z-index: -1;\n}\n\n.darkmatter-btn:hover::before {\n transform: scale(1.5);\n}\n\n.darkmatter-particle {\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: #b56aff;\n opacity: 0;\n z-index: -1;\n}\n\n.darkmatter-btn:hover .darkmatter-particle {\n animation: darkmatter-float 2s forwards;\n}\n\n@keyframes darkmatter-float {\n 0% {\n transform: translate(0, 0) scale(0);\n opacity: 0;\n }\n 20% {\n opacity: 0.8;\n }\n 100% {\n transform: translate(var(--tx), var(--ty)) scale(1);\n opacity: 0;\n }\n}\n"}

silly-frog-76

👁 实时预览

📝 源代码