{"html":"

\n \n \n \n \n \n \n Activate\n

\n \n

\n","css":".button-container {\n display: flex;\n justify-content: center;\n align-items: center;\n perspective: 800px;\n}\n\n/* Hacker Button Styling */\n.hacker-button {\n background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);\n color: #00ff00;\n padding: 14px 36px;\n font-size: 20px;\n font-family: \"Courier New\", monospace;\n font-weight: 700;\n border: 2px solid #00ff00;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);\n transform-style: preserve-3d;\n transform: rotateX(0deg) rotateY(0deg);\n}\n\n/* 3D Hover Effects */\n.hacker-button:hover {\n background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);\n transform: rotateX(15deg) rotateY(15deg) translateZ(20px);\n box-shadow:\n 0 10px 25px rgba(0, 255, 0, 0.6),\n 0 0 40px rgba(0, 255, 0, 0.3),\n inset 0 0 15px rgba(0, 255, 0, 0.2);\n animation:\n flicker 0.2s infinite alternate,\n glowPulse 1.5s infinite;\n}\n\n/* 3D Click Effect */\n.hacker-button:active {\n transform: scale(0.95) rotateX(-10deg) rotateY(-10deg) translateZ(-10px);\n box-shadow:\n 0 0 10px rgba(0, 255, 0, 0.4),\n inset 0 0 20px rgba(0, 255, 0, 0.3);\n animation: glitch 0.3s ease-in-out;\n}\n\n/* SVG Animations */\n.play-icon {\n transition: transform 0.4s ease;\n}\n\n.hacker-button:hover .rect-path {\n animation: pulseRect 1.5s infinite;\n}\n\n.hacker-button:hover .triangle-path {\n animation:\n bounceTriangle 0.8s infinite,\n rotateTriangle 2s infinite;\n}\n\n/* Particle Layer */\n.particle-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n opacity: 0;\n background: radial-gradient(\n circle at 20% 20%,\n rgba(0, 255, 0, 0.2) 0%,\n transparent 50%\n ),\n radial-gradient(circle at 80% 80%, rgba(0, 255, 0, 0.2) 0%, transparent 50%);\n transition: opacity 0.3s ease;\n}\n\n/* Particle Effects when Checked */\n.subscribe-checkbox:checked + .hacker-button .particle-layer {\n opacity: 1;\n animation:\n particleFlow 4s infinite linear,\n particleBurst 2s infinite;\n}\n\n.subscribe-checkbox:checked + .hacker-button .particle-layer::before,\n.subscribe-checkbox:checked + .hacker-button .particle-layer::after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n background: #00ff00;\n border-radius: 50%;\n animation: particleFloat 3s infinite ease-in-out;\n}\n\n.subscribe-checkbox:checked + .hacker-button .particle-layer::before {\n top: 10%;\n left: 30%;\n animation-delay: 0.5s;\n}\n\n.subscribe-checkbox:checked + .hacker-button .particle-layer::after {\n top: 70%;\n left: 60%;\n animation-delay: 1s;\n}\n\n/* Hidden Checkbox */\n.subscribe-checkbox {\n display: none;\n}\n\n/* Subscribed State */\n.subscribe-checkbox:checked + .hacker-button {\n background: #00ff00;\n color: #000000;\n border-color: #000000;\n transform: rotateX(10deg) rotateY(10deg) translateZ(15px);\n box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);\n animation: pulse3D 1.5s ease-in-out infinite;\n}\n\n/* Animations */\n@keyframes flicker {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0.85;\n }\n}\n\n@keyframes glowPulse {\n 0% {\n box-shadow: 0 10px 25px rgba(0, 255, 0, 0.6);\n }\n 50% {\n box-shadow: 0 15px 35px rgba(0, 255, 0, 0.8);\n }\n 100% {\n box-shadow: 0 10px 25px rgba(0, 255, 0, 0.6);\n }\n}\n\n@keyframes pulseRect {\n 0% {\n stroke-width: 2;\n }\n 50% {\n stroke-width: 3.5;\n }\n 100% {\n stroke-width: 2;\n }\n}\n\n@keyframes bounceTriangle {\n 0% {\n transform: translateX(0);\n }\n 50% {\n transform: translateX(4px);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes rotateTriangle {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes glitch {\n 0% {\n transform: translate(0) rotateX(0) rotateY(0);\n }\n 20% {\n transform: translate(-2px, 2px) rotateX(2deg);\n }\n 40% {\n transform: translate(2px, -2px) rotateY(-2deg);\n }\n 60% {\n transform: translate(-1px, 1px) rotateX(1deg);\n }\n 80% {\n transform: translate(1px, -1px) rotateY(-1deg);\n }\n 100% {\n transform: translate(0) rotateX(0) rotateY(0);\n }\n}\n\n@keyframes particleFlow {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 100px 100px;\n }\n}\n\n@keyframes particleBurst {\n 0% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes particleFloat {\n 0% {\n transform: translate(0, 0);\n opacity: 1;\n }\n 50% {\n transform: translate(20px, -20px);\n opacity: 0.7;\n }\n 100% {\n transform: translate(0, 0);\n opacity: 1;\n }\n}\n\n@keyframes pulse3D {\n 0% {\n transform: rotateX(10deg) rotateY(10deg) translateZ(15px);\n }\n 50% {\n transform: rotateX(15deg) rotateY(15deg) translateZ(25px);\n }\n 100% {\n transform: rotateX(10deg) rotateY(10deg) translateZ(15px);\n }\n}\n"}

red-ladybug-75

👁 实时预览

📝 源代码