{"html":"

\n\n

\n","css":".loader-container {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.traffic-light {\n background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 40%, #1e1e1e 100%);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 28px;\n padding: 24px;\n box-shadow:\n 0 40px 80px rgba(0, 0, 0, 0.5),\n 0 20px 40px rgba(0, 0, 0, 0.3),\n 0 8px 16px rgba(0, 0, 0, 0.2),\n inset 0 2px 0 rgba(255, 255, 255, 0.05),\n inset 0 -2px 20px rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(20px) saturate(180%);\n position: relative;\n width: 100px;\n}\n\n.light-row {\n margin: 18px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n}\n\n.light-row:first-child {\n margin-top: 0;\n}\n\n.light-row:last-child {\n margin-bottom: 0;\n}\n\n.light {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n border: 2px solid rgba(255, 255, 255, 0.06);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.light::before {\n content: \"\";\n position: absolute;\n top: 16px;\n left: 20px;\n width: 28px;\n height: 24px;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.15) 0%,\n transparent 60%\n );\n border-radius: 50%;\n filter: blur(6px);\n opacity: 0.4;\n}\n\n.light::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: radial-gradient(\n circle at 35% 35%,\n rgba(255, 255, 255, 0.08) 0%,\n transparent 65%\n );\n}\n\n.red-light {\n background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),\n linear-gradient(135deg, #331212, #1a0606);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n animation: redSequence 4s ease-in-out infinite;\n}\n\n@keyframes redSequence {\n 0% {\n background: radial-gradient(circle at center, #ff4444 0%, #cc1111 80%),\n linear-gradient(135deg, #ff5555, #dd2222);\n border-color: rgba(255, 68, 68, 0.25);\n box-shadow:\n 0 0 40px rgba(255, 68, 68, 0.6),\n 0 0 80px rgba(255, 68, 68, 0.3),\n 0 0 120px rgba(255, 68, 68, 0.15),\n inset 0 3px 6px rgba(255, 255, 255, 0.15),\n inset 0 -3px 6px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n }\n\n 25%,\n 75%,\n 100% {\n background: radial-gradient(circle at center, #2d1515 0%, #1a0808 80%),\n linear-gradient(135deg, #331212, #1a0606);\n border-color: rgba(255, 255, 255, 0.06);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n transform: scale(1);\n }\n}\n\n.yellow-light {\n background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),\n linear-gradient(135deg, #333312, #1a1a06);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n animation: yellowSequence 4s ease-in-out infinite;\n}\n\n@keyframes yellowSequence {\n 0%,\n 50%,\n 100% {\n background: radial-gradient(circle at center, #2d2d15 0%, #1a1a08 80%),\n linear-gradient(135deg, #333312, #1a1a06);\n border-color: rgba(255, 255, 255, 0.06);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n transform: scale(1);\n }\n\n 25% {\n background: radial-gradient(circle at center, #ffdd44 0%, #cc9900 80%),\n linear-gradient(135deg, #ffee55, #ddaa22);\n border-color: rgba(255, 221, 68, 0.25);\n box-shadow:\n 0 0 40px rgba(255, 221, 68, 0.6),\n 0 0 80px rgba(255, 221, 68, 0.3),\n 0 0 120px rgba(255, 221, 68, 0.15),\n inset 0 3px 6px rgba(255, 255, 255, 0.15),\n inset 0 -3px 6px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n }\n}\n\n.green-light {\n background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),\n linear-gradient(135deg, #123312, #061a06);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n animation: greenSequence 4s ease-in-out infinite;\n}\n\n@keyframes greenSequence {\n 0%,\n 25%,\n 75% {\n background: radial-gradient(circle at center, #152d15 0%, #081a08 80%),\n linear-gradient(135deg, #123312, #061a06);\n border-color: rgba(255, 255, 255, 0.06);\n box-shadow:\n inset 0 6px 12px rgba(0, 0, 0, 0.4),\n inset 0 -3px 6px rgba(255, 255, 255, 0.02);\n transform: scale(1);\n }\n\n 50%,\n 100% {\n background: radial-gradient(circle at center, #44ff44 0%, #11cc11 80%),\n linear-gradient(135deg, #55ff55, #22dd22);\n border-color: rgba(68, 255, 68, 0.25);\n box-shadow:\n 0 0 40px rgba(68, 255, 68, 0.6),\n 0 0 80px rgba(68, 255, 68, 0.3),\n 0 0 120px rgba(68, 255, 68, 0.15),\n inset 0 3px 6px rgba(255, 255, 255, 0.15),\n inset 0 -3px 6px rgba(0, 0, 0, 0.4);\n transform: scale(1.05);\n }\n}\n\n.loading-status {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.5);\n font-weight: 500;\n letter-spacing: 0.5px;\n animation: statusUpdate 4s ease-in-out infinite;\n}\n\n.loading-status::before {\n content: \"Initializing red signal...\";\n animation: textUpdate 4s ease-in-out infinite;\n}\n\n@keyframes textUpdate {\n 0%,\n 24% {\n content: \"Initializing red signal...\";\n }\n 25%,\n 49% {\n content: \"Preparing yellow transition...\";\n }\n 50%,\n 74% {\n content: \"Activating green protocol...\";\n }\n 75%,\n 100% {\n content: \"Completing traffic sequence...\";\n }\n}\n\n@keyframes statusUpdate {\n 0%,\n 100% {\n opacity: 1;\n }\n 12.5%,\n 37.5%,\n 62.5%,\n 87.5% {\n opacity: 0.5;\n }\n}\n"}

chilly-stingray-11

👁 实时预览

📝 源代码