{"html":"

\n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n\n \n\n \n\n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n

\n","css":":root {\n --bg-1: #071022;\n --bg-2: #0b1530;\n --card-pad: 28px;\n --wire-color-1: #2a2f33;\n --wire-color-2: #15181a;\n --wire-stroke: 10;\n --bulb-width: 40;\n}\n.stage {\n width: min(1100px);\n padding: var(--card-pad);\n}\n.title {\n font-size: 16px;\n font-weight: 600;\n margin: 6px 0 12px;\n color: #dfeeff;\n}\n.svg {\n width: 100%;\n height: auto;\n display: block;\n}\n.wire-base {\n fill: none;\n stroke-width: var(--wire-stroke);\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n.wire-shadow {\n opacity: 0.35;\n filter: blur(6px);\n}\n.wire-wrap {\n transform-origin: 50% 0;\n animation: sway 6.8s ease-in-out infinite;\n}\n.socket {\n fill: #222;\n stroke: #0d0d0d;\n stroke-width: 1;\n}\n.bulb {\n transform-box: fill-box;\n transform-origin: 50% 40%;\n cursor: default;\n}\n@keyframes bulb-blink {\n 0% {\n filter: none;\n opacity: 1;\n }\n 6% {\n fill: var(--on);\n filter: drop-shadow(0 0 10px var(--on));\n }\n 18% {\n fill: var(--on);\n filter: drop-shadow(0 0 18px var(--on));\n }\n 35% {\n fill: var(--off);\n filter: none;\n opacity: 0.92;\n }\n 60% {\n fill: var(--off);\n opacity: 0.95;\n }\n 80% {\n fill: var(--on);\n filter: drop-shadow(0 0 12px var(--on));\n opacity: 1;\n }\n 100% {\n fill: var(--off);\n filter: none;\n opacity: 0.96;\n }\n}\n.bulb .glass {\n transition: fill 0.12s linear;\n animation: bulb-blink var(--dur, 2.6s) var(--delay, 0s) infinite ease-in-out;\n}\n.glass-highlight {\n opacity: 0.9;\n mix-blend-mode: screen;\n pointer-events: none;\n}\n.hanger {\n transform-box: fill-box;\n transform-origin: 50% 0;\n animation: hanger-sway 7.2s ease-in-out infinite;\n}\n@keyframes hanger-sway {\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(0.9deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n.glow {\n mix-blend-mode: screen;\n opacity: 0.95;\n transition: opacity 0.12s linear;\n pointer-events: none;\n}\n@media (max-width: 720px) {\n :root {\n --card-pad: 16px;\n --wire-stroke: 8;\n --bulb-width: 34;\n }\n .title {\n font-size: 15px;\n }\n}\n@media (max-width: 420px) {\n :root {\n --wire-stroke: 6;\n --bulb-width: 28;\n }\n .title {\n font-size: 14px;\n }\n}\n.bulb-base {\n filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));\n}\n.back-spot {\n opacity: 0;\n mix-blend-mode: screen;\n filter: blur(18px);\n}\n"}

empty-rat-97

👁 实时预览

📝 源代码