{"html":"\n \n

\n ᛟ ᛏ ᛞ ᛁ ᚾ\n

\n \n \n \n \n

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

\n\n","css":".viking-toggle {\n --vt-wood-dark: #1a1208;\n --vt-wood-medium: #2d2116;\n --vt-wood-light: #3d2e1f;\n --vt-metal-dark: #2a1f15;\n --vt-metal-medium: #4a3a2a;\n --vt-metal-light: #7a6a55;\n --vt-bronze: #8b7355;\n --vt-gold: #c9a227;\n --vt-gold-bright: #f0d060;\n --vt-fire: #ff6a00;\n --vt-fire-glow: rgba(255, 120, 40, 0.6);\n --vt-ember: #ff4500;\n position: relative;\n display: block;\n width: 180px;\n height: 78px;\n cursor: pointer;\n filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));\n}\n\n.viking-toggle__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.viking-toggle__track {\n position: relative;\n width: 100%;\n height: 100%;\n background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E\"),\n linear-gradient(\n 180deg,\n var(--vt-wood-dark) 0%,\n var(--vt-wood-medium) 15%,\n var(--vt-wood-light) 50%,\n var(--vt-wood-medium) 85%,\n var(--vt-wood-dark) 100%\n );\n border-radius: 44px;\n overflow: hidden;\n box-shadow:\n inset 0 6px 20px rgba(0, 0, 0, 0.9),\n inset 0 -3px 15px rgba(139, 115, 85, 0.08),\n inset 2px 0 10px rgba(0, 0, 0, 0.4),\n inset -2px 0 10px rgba(0, 0, 0, 0.4),\n 0 12px 40px rgba(0, 0, 0, 0.7),\n 0 4px 15px rgba(0, 0, 0, 0.9);\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.viking-toggle__track::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 44px;\n padding: 4px;\n background: linear-gradient(\n 170deg,\n rgba(180, 160, 120, 0.6) 0%,\n var(--vt-bronze) 15%,\n var(--vt-metal-medium) 30%,\n var(--vt-metal-dark) 50%,\n var(--vt-metal-medium) 70%,\n var(--vt-bronze) 85%,\n rgba(180, 160, 120, 0.6) 100%\n );\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n}\n\n.viking-toggle__track::after {\n content: \"\";\n position: absolute;\n inset: 10px;\n border-radius: 34px;\n background: repeating-linear-gradient(\n 90deg,\n transparent 0px,\n transparent 8px,\n rgba(0, 0, 0, 0.15) 8px,\n rgba(0, 0, 0, 0.15) 9px\n ),\n repeating-linear-gradient(\n 0deg,\n transparent 0px,\n transparent 20px,\n rgba(0, 0, 0, 0.05) 20px,\n rgba(0, 0, 0, 0.05) 21px\n );\n pointer-events: none;\n opacity: 0.6;\n}\n\n.viking-toggle__inner {\n position: absolute;\n inset: 8px;\n border-radius: 36px;\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 0.5) 0%,\n transparent 25%,\n transparent 75%,\n rgba(139, 115, 85, 0.08) 100%\n );\n overflow: hidden;\n}\n\n.viking-toggle__inner::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(139, 115, 85, 0.3) 20%,\n rgba(139, 115, 85, 0.5) 50%,\n rgba(139, 115, 85, 0.3) 80%,\n transparent 100%\n );\n}\n\n.viking-toggle__runes {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n letter-spacing: 6px;\n color: rgba(139, 90, 43, 0.12);\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n pointer-events: none;\n transition: all 0.6s ease;\n}\n\n.viking-toggle__checkbox:checked ~ .viking-toggle__track .viking-toggle__runes {\n color: rgba(255, 150, 50, 0.5);\n text-shadow:\n 0 0 20px var(--vt-fire-glow),\n 0 0 40px rgba(255, 100, 30, 0.3);\n animation: viking-rune-pulse 2s ease-in-out infinite;\n}\n\n@keyframes viking-rune-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 50% {\n opacity: 0.7;\n }\n}\n\n.viking-toggle__glow {\n position: absolute;\n inset: 0;\n border-radius: 36px;\n background: radial-gradient(\n ellipse at 85% 50%,\n rgba(255, 100, 30, 0.4) 0%,\n rgba(255, 80, 20, 0.2) 30%,\n transparent 60%\n ),\n radial-gradient(\n ellipse at 75% 30%,\n rgba(255, 150, 50, 0.2) 0%,\n transparent 40%\n );\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n}\n\n.viking-toggle__checkbox:checked ~ .viking-toggle__track .viking-toggle__glow {\n opacity: 1;\n animation: viking-fire-flicker 3s ease-in-out infinite;\n}\n\n@keyframes viking-fire-flicker {\n 0%,\n 100% {\n opacity: 1;\n }\n\n 25% {\n opacity: 0.85;\n }\n\n 50% {\n opacity: 1;\n }\n\n 75% {\n opacity: 0.9;\n }\n}\n\n.viking-toggle__knob {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n width: 58px;\n height: 58px;\n border-radius: 50%;\n background: radial-gradient(\n circle at 35% 35%,\n #a89a80 0%,\n #7a6a5a 25%,\n #5a4a3a 50%,\n #3a2a1a 80%,\n #2a1a0a 100%\n );\n box-shadow:\n 0 6px 25px rgba(0, 0, 0, 0.7),\n 0 3px 10px rgba(0, 0, 0, 0.5),\n inset 0 3px 6px rgba(255, 255, 255, 0.12),\n inset 0 -4px 8px rgba(0, 0, 0, 0.4),\n inset 3px 0 6px rgba(255, 255, 255, 0.05),\n inset -3px 0 6px rgba(0, 0, 0, 0.2);\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 10;\n}\n\n.viking-toggle__knob::before {\n content: \"\";\n position: absolute;\n inset: 4px;\n border-radius: 50%;\n background: transparent;\n border: 3px solid transparent;\n background-image: linear-gradient(\n var(--vt-wood-medium),\n var(--vt-wood-medium)\n ),\n linear-gradient(\n 135deg,\n rgba(180, 160, 120, 0.8) 0%,\n var(--vt-bronze) 25%,\n var(--vt-metal-dark) 50%,\n var(--vt-bronze) 75%,\n rgba(180, 160, 120, 0.8) 100%\n );\n background-origin: border-box;\n background-clip: padding-box, border-box;\n box-shadow:\n inset 0 0 12px rgba(0, 0, 0, 0.6),\n 0 0 8px rgba(139, 115, 85, 0.2);\n transition: all 0.6s ease;\n}\n\n.viking-toggle__knob::after {\n content: \"ᛟ\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 22px;\n color: var(--vt-bronze);\n text-shadow:\n 0 1px 2px rgba(0, 0, 0, 0.8),\n inset 0 1px 1px rgba(255, 255, 255, 0.1);\n transition: all 0.6s ease;\n}\n\n.viking-toggle__shield {\n position: absolute;\n inset: 6px;\n border-radius: 50%;\n background: conic-gradient(\n from 0deg at 50% 50%,\n transparent 0deg,\n rgba(0, 0, 0, 0.08) 30deg,\n transparent 60deg,\n rgba(0, 0, 0, 0.08) 90deg,\n transparent 120deg,\n rgba(0, 0, 0, 0.08) 150deg,\n transparent 180deg,\n rgba(0, 0, 0, 0.08) 210deg,\n transparent 240deg,\n rgba(0, 0, 0, 0.08) 270deg,\n transparent 300deg,\n rgba(0, 0, 0, 0.08) 330deg,\n transparent 360deg\n );\n pointer-events: none;\n}\n\n.viking-toggle__shield::before {\n content: \"\";\n position: absolute;\n inset: 12px;\n border-radius: 50%;\n border: 1px solid rgba(139, 115, 85, 0.2);\n}\n\n.viking-toggle__checkbox:checked ~ .viking-toggle__track .viking-toggle__knob {\n left: calc(100% - 68px);\n background: radial-gradient(\n circle at 35% 35%,\n var(--vt-gold-bright) 0%,\n var(--vt-gold) 25%,\n #a07820 50%,\n #705010 80%,\n #503800 100%\n );\n box-shadow:\n 0 6px 35px var(--vt-fire-glow),\n 0 3px 15px rgba(255, 100, 30, 0.5),\n 0 0 60px rgba(255, 120, 40, 0.3),\n inset 0 3px 6px rgba(255, 255, 255, 0.25),\n inset 0 -4px 8px rgba(0, 0, 0, 0.3),\n inset 3px 0 6px rgba(255, 255, 255, 0.1),\n inset -3px 0 6px rgba(0, 0, 0, 0.15);\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track\n .viking-toggle__knob::before {\n background-image: linear-gradient(#604010, #604010),\n linear-gradient(\n 135deg,\n var(--vt-gold-bright) 0%,\n var(--vt-gold) 25%,\n #a07820 50%,\n var(--vt-gold) 75%,\n var(--vt-gold-bright) 100%\n );\n box-shadow:\n inset 0 0 12px rgba(0, 0, 0, 0.4),\n 0 0 20px var(--vt-fire-glow);\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track\n .viking-toggle__knob::after {\n color: var(--vt-gold-bright);\n text-shadow:\n 0 0 15px var(--vt-fire-glow),\n 0 0 30px rgba(255, 150, 50, 0.5),\n 0 1px 2px rgba(0, 0, 0, 0.5);\n animation: viking-rune-glow 2s ease-in-out infinite;\n}\n\n@keyframes viking-rune-glow {\n 0%,\n 100% {\n text-shadow:\n 0 0 15px var(--vt-fire-glow),\n 0 0 30px rgba(255, 150, 50, 0.5),\n 0 1px 2px rgba(0, 0, 0, 0.5);\n }\n\n 50% {\n text-shadow:\n 0 0 25px var(--vt-fire-glow),\n 0 0 50px rgba(255, 150, 50, 0.7),\n 0 1px 2px rgba(0, 0, 0, 0.5);\n }\n}\n\n.viking-toggle__icon {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n z-index: 5;\n pointer-events: none;\n transition: all 0.6s ease;\n}\n\n.viking-toggle__icon--left {\n left: 20px;\n fill: rgba(139, 115, 85, 0.5);\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));\n}\n\n.viking-toggle__icon--right {\n right: 20px;\n fill: rgba(139, 115, 85, 0.35);\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track\n .viking-toggle__icon--left {\n fill: rgba(139, 115, 85, 0.35);\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track\n .viking-toggle__icon--right {\n fill: var(--vt-gold);\n filter: drop-shadow(0 0 8px var(--vt-fire-glow))\n drop-shadow(0 0 15px rgba(255, 100, 30, 0.4));\n animation: viking-icon-pulse 2s ease-in-out infinite;\n}\n\n@keyframes viking-icon-pulse {\n 0%,\n 100% {\n transform: translateY(-50%) scale(1);\n }\n\n 50% {\n transform: translateY(-50%) scale(1.1);\n }\n}\n\n.viking-toggle__chain {\n position: absolute;\n width: 8px;\n height: 50px;\n background: linear-gradient(\n 90deg,\n #2a2018 0%,\n #5a4a3a 15%,\n var(--vt-bronze) 40%,\n var(--vt-bronze) 60%,\n #5a4a3a 85%,\n #2a2018 100%\n );\n border-radius: 4px;\n box-shadow:\n inset 0 0 4px rgba(0, 0, 0, 0.6),\n 0 3px 8px rgba(0, 0, 0, 0.5);\n top: 50%;\n transform: translateY(-50%);\n}\n\n.viking-toggle__chain--left {\n left: -4px;\n}\n\n.viking-toggle__chain--right {\n right: -4px;\n}\n\n.viking-toggle__chain::before,\n.viking-toggle__chain::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 14px;\n height: 14px;\n border: 3px solid;\n border-color: var(--vt-bronze);\n border-radius: 50%;\n background: var(--vt-wood-dark);\n box-shadow:\n inset 0 0 4px rgba(0, 0, 0, 0.6),\n 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.viking-toggle__chain::before {\n top: -10px;\n}\n\n.viking-toggle__chain::after {\n bottom: -10px;\n}\n\n.viking-toggle__embers {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n border-radius: 44px;\n opacity: 0;\n transition: opacity 0.6s ease;\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track\n .viking-toggle__embers {\n opacity: 1;\n}\n\n.viking-toggle__ember {\n position: absolute;\n width: 5px;\n height: 5px;\n background: radial-gradient(\n circle,\n var(--vt-gold-bright) 0%,\n var(--vt-fire) 40%,\n transparent 70%\n );\n border-radius: 50%;\n animation: viking-ember-float 2.5s ease-out infinite;\n}\n\n.viking-toggle__ember:nth-child(1) {\n right: 22%;\n bottom: 35%;\n animation-delay: 0s;\n width: 4px;\n height: 4px;\n}\n\n.viking-toggle__ember:nth-child(2) {\n right: 28%;\n bottom: 45%;\n animation-delay: 0.4s;\n width: 6px;\n height: 6px;\n}\n\n.viking-toggle__ember:nth-child(3) {\n right: 18%;\n bottom: 50%;\n animation-delay: 0.8s;\n width: 3px;\n height: 3px;\n}\n\n.viking-toggle__ember:nth-child(4) {\n right: 32%;\n bottom: 40%;\n animation-delay: 1.2s;\n width: 5px;\n height: 5px;\n}\n\n@keyframes viking-ember-float {\n 0% {\n opacity: 0;\n transform: translateY(0) scale(1) rotate(0deg);\n }\n\n 15% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: translateY(-40px) scale(0) rotate(180deg);\n }\n}\n\n.viking-toggle:hover .viking-toggle__track {\n box-shadow:\n inset 0 6px 20px rgba(0, 0, 0, 0.9),\n inset 0 -3px 15px rgba(139, 115, 85, 0.12),\n inset 2px 0 10px rgba(0, 0, 0, 0.4),\n inset -2px 0 10px rgba(0, 0, 0, 0.4),\n 0 15px 50px rgba(0, 0, 0, 0.8),\n 0 5px 20px rgba(0, 0, 0, 0.95);\n transform: translateY(-2px);\n}\n\n.viking-toggle:hover .viking-toggle__knob {\n box-shadow:\n 0 8px 30px rgba(0, 0, 0, 0.8),\n 0 4px 12px rgba(0, 0, 0, 0.6),\n inset 0 3px 6px rgba(255, 255, 255, 0.15),\n inset 0 -4px 8px rgba(0, 0, 0, 0.4),\n inset 3px 0 6px rgba(255, 255, 255, 0.08),\n inset -3px 0 6px rgba(0, 0, 0, 0.25);\n}\n\n.viking-toggle__checkbox:checked\n ~ .viking-toggle__track:hover\n .viking-toggle__knob {\n box-shadow:\n 0 8px 45px var(--vt-fire-glow),\n 0 4px 20px rgba(255, 100, 30, 0.6),\n 0 0 80px rgba(255, 120, 40, 0.4),\n inset 0 3px 6px rgba(255, 255, 255, 0.3),\n inset 0 -4px 8px rgba(0, 0, 0, 0.25),\n inset 3px 0 6px rgba(255, 255, 255, 0.15),\n inset -3px 0 6px rgba(0, 0, 0, 0.1);\n}\n\n.viking-toggle:active .viking-toggle__knob {\n transform: translateY(-50%) scale(0.95);\n}\n\n.viking-toggle__checkbox:focus-visible ~ .viking-toggle__track {\n outline: 3px solid var(--vt-gold);\n outline-offset: 6px;\n}\n"}

stale-duck-93

👁 实时预览

📝 源代码