{"html":"

\n \n \n \n \n \n \n Ignite\n

\n","css":".fire-button {\n position: relative;\n width: 160px;\n height: 240px;\n background: #2a1a0a; /* Simple dark brown for fire base */\n border-bottom: 3px solid #ff3c00; /* Dark orange */\n /* Fire-shaped clip-path */\n clip-path: polygon(\n 50% 0%,\n /* Top peak */ 70% 20%,\n /* Right flame tip */ 80% 40%,\n /* Right curve */ 100% 70%,\n /* Right base flare */ 70% 100%,\n /* Right base curve */ 30% 100%,\n /* Left base curve */ 0% 70%,\n /* Left base flare */ 20% 40%,\n /* Left curve */ 30% 20% /* Left flame tip */\n );\n cursor: pointer;\n overflow: hidden;\n animation: flame-glow 3s infinite ease-in-out;\n transition: transform 0.3s ease;\n}\n\n.fire-svg {\n position: absolute;\n top: 30px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 160px;\n color: #ff3c00; /* Bright orange-red */\n filter: drop-shadow(0 0 4px #ff3c00);\n animation: fire-flicker 2s infinite ease-in-out;\n transition:\n transform 0.4s ease,\n filter 0.4s ease;\n}\n\n.fire-flame {\n animation: flame-curl 1.8s infinite ease-in-out;\n}\n\n.fire-base {\n animation: base-pulse 2.5s infinite ease-in-out;\n}\n\n.fire-outline {\n animation: outline-shimmer 3s infinite ease-in-out;\n}\n\n.fire-label {\n position: absolute;\n bottom: 25px;\n left: 50%;\n transform: translateX(-50%);\n color: #ff8c00;\n font-size: 16px;\n font-weight: bolder;\n text-transform: uppercase;\n letter-spacing: 1px;\n animation: label-glow 2s infinite ease-in-out;\n}\n\n/* Ember glow */\n.ember-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: radial-gradient(circle, rgba(255, 140, 0, 0.2), transparent);\n opacity: 0.4;\n animation: ember-rise 3s infinite ease-in-out;\n}\n\n/* Heat ripple */\n.heat-ripple {\n position: absolute;\n width: 100%;\n height: 60%;\n bottom: 0;\n left: 0;\n background: linear-gradient(to top, rgba(255, 69, 0, 0.3), transparent);\n opacity: 0;\n}\n\n/* Fire flare */\n.fire-flare {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: radial-gradient(circle, #ff4500 15%, transparent 50%);\n opacity: 0;\n}\n\n/* Spark drift */\n.spark-drift {\n position: absolute;\n width: 80px;\n height: 80px;\n top: 40px;\n left: 50%;\n transform: translateX(-50%) scale(0);\n border-radius: 50%;\n border: 1px solid #ff8c00;\n opacity: 0;\n}\n\n/* Glow ring */\n.glow-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-shadow: 0 0 20px #ff8c00 inset;\n opacity: 0;\n}\n\n/* Hover effects */\n.fire-button:hover {\n transform: scale(1.05);\n}\n\n.fire-button:hover .fire-svg {\n transform: translateX(-50%) scale(1.1);\n filter: drop-shadow(0 0 8px #ff4500);\n}\n\n.fire-button:hover .fire-flame {\n animation: flame-rise 1.2s infinite ease-in-out;\n}\n\n.fire-button:hover .fire-base {\n animation: base-throb 1.5s infinite ease-in-out;\n}\n\n.fire-button:hover .heat-ripple {\n opacity: 0.5;\n animation: ripple-flow 2s infinite ease-in-out;\n}\n\n.fire-button:hover .ember-glow {\n opacity: 0.6;\n animation: ember-rise 2s infinite ease-in-out;\n}\n\n/* Click effects */\n.fire-button:active {\n border-color: #ff3c00; /* Brighter orange */\n transform: scale(0.98);\n}\n\n.fire-button:active .fire-svg {\n transform: translateX(-50%) scale(1.05);\n filter: drop-shadow(0 0 12px #ff3c00);\n animation: fire-blaze 0.6s ease-out;\n}\n\n.fire-button:active .fire-flame {\n animation: flame-flare 0.6s ease-out;\n}\n\n.fire-button:active .fire-base {\n animation: base-surge 0.6s ease-out;\n}\n\n.fire-button:active .spark-drift {\n animation: spark-ascend 0.8s ease-out;\n}\n\n.fire-button:active .fire-flare {\n opacity: 0.7;\n animation: flare-burst 0.8s ease-out;\n}\n\n.fire-button:active .glow-ring {\n opacity: 0.8;\n animation: ring-glow 0.8s ease-out;\n}\n\n.fire-button:active .fire-label {\n animation: label-glow 0.2s infinite;\n}\n\n/* Animations */\n@keyframes flame-glow {\n 0%,\n 100% {\n border-color: #ff8c00;\n }\n 50% {\n border-color: #ffa500;\n }\n}\n\n@keyframes fire-flicker {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.95;\n }\n}\n\n@keyframes flame-curl {\n 0%,\n 100% {\n transform: translateY(0) scaleY(1);\n }\n 50% {\n transform: translateY(-2px) scaleY(1.05);\n }\n}\n\n@keyframes base-pulse {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 50% {\n transform: translateX(0.5px);\n }\n}\n\n@keyframes outline-shimmer {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.9;\n }\n}\n\n@keyframes label-glow {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.9;\n }\n}\n\n@keyframes ember-rise {\n 0% {\n transform: translateY(0);\n opacity: 0.4;\n }\n 50% {\n transform: translateY(-10px);\n opacity: 0.6;\n }\n 100% {\n transform: translateY(0);\n opacity: 0.4;\n }\n}\n\n@keyframes flame-rise {\n 0%,\n 100% {\n transform: translateY(0) scaleY(1);\n }\n 50% {\n transform: translateY(-4px) scaleY(1.1);\n }\n}\n\n@keyframes base-throb {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 50% {\n transform: translateX(1px) scale(1.05);\n }\n}\n\n@keyframes ripple-flow {\n 0% {\n transform: translateY(40%);\n opacity: 0.5;\n }\n 50% {\n transform: translateY(20%);\n opacity: 0.7;\n }\n 100% {\n transform: translateY(0);\n opacity: 0.5;\n }\n}\n\n@keyframes fire-blaze {\n 0% {\n transform: translateX(-50%) scale(1);\n }\n 50% {\n transform: translateX(-50%) scale(1.15);\n }\n 100% {\n transform: translateX(-50%) scale(1);\n }\n}\n\n@keyframes flame-flare {\n 0% {\n transform: translateY(0) scaleY(1);\n }\n 50% {\n transform: translateY(-6px) scaleY(1.2);\n }\n 100% {\n transform: translateY(0) scaleY(1);\n }\n}\n\n@keyframes base-surge {\n 0% {\n transform: translateX(0);\n }\n 50% {\n transform: translateX(2px) scale(1.1);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n@keyframes spark-ascend {\n 0% {\n transform: translateX(-50%) scale(0);\n opacity: 0.8;\n }\n 100% {\n transform: translateX(-50%) scale(1.5) translateY(-40px);\n opacity: 0;\n }\n}\n\n@keyframes flare-burst {\n 0% {\n transform: scale(0);\n opacity: 0.7;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.5;\n }\n 100% {\n transform: scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes ring-glow {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n }\n}\n"}

big-gecko-80

👁 实时预览

📝 源代码