{"html":"

\n \n

\n \n \n \n

\n \n

\n","css":".time-crystal-wrapper {\n --crystal-base-color: #4a4a4a;\n --crystal-panel-color: #333333;\n --crystal-glow-idle: rgba(52, 152, 219, 0.6);\n --crystal-glow-active: rgba(46, 204, 113, 0.8);\n --crystal-color-idle: #3498db;\n --crystal-color-active: #2ecc71;\n --text-color: #ecf0f1;\n --shadow-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n min-width: 100%;\n background: #212121;\n font-family: sans-serif;\n overflow: hidden;\n}\n.time-crystal-container {\n position: relative;\n width: 16em;\n height: 22em;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n}\n.crystal-pedestal {\n width: 12em;\n height: 4em;\n background: linear-gradient(\n var(--crystal-panel-color),\n var(--crystal-base-color)\n );\n border-radius: 0.5em 0.5em 0 0;\n position: relative;\n box-shadow: 0 0.5em 0 #1a1a1a;\n border-top: 0.2em solid #555;\n border-left: 0.2em solid #555;\n border-right: 0.2em solid #555;\n}\n.crystal-pedestal-top {\n position: absolute;\n top: -1em;\n left: 1em;\n width: 10em;\n height: 1em;\n background: var(--crystal-base-color);\n border-radius: 0.2em;\n border: 0.2em solid #555;\n}\n.crystal-charge-checkbox {\n display: none;\n}\n.crystal-body {\n position: absolute;\n bottom: 6em;\n width: 8em;\n height: 10em;\n background: var(--crystal-color-idle);\n clip-path: polygon(50% 0%, 100% 35%, 85% 100%, 15% 100%, 0% 35%);\n z-index: 2;\n transition: all 0.5s ease;\n box-shadow: 0 0 2em var(--crystal-glow-idle);\n}\n.crystal-facet {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.2);\n transition: all 0.5s ease;\n}\n.crystal-facet-1 {\n clip-path: polygon(50% 0%, 50% 50%, 0% 35%);\n animation: facet-flicker 4s infinite 0.5s;\n}\n.crystal-facet-2 {\n clip-path: polygon(50% 0%, 100% 35%, 50% 50%);\n animation: facet-flicker 4s infinite 1s;\n}\n.crystal-facet-3 {\n clip-path: polygon(50% 100%, 15% 100%, 50% 50%);\n animation: facet-flicker 4s infinite 1.5s;\n}\n.crystal-charge-checkbox:checked ~ .crystal-body {\n background: var(--crystal-color-active);\n box-shadow: 0 0 3em var(--crystal-glow-active);\n animation: crystal-pulse 2s infinite;\n}\n.crystal-charge-checkbox:checked ~ .crystal-body .crystal-facet {\n animation: facet-flicker-active 2s infinite;\n}\n.charge-switch-label {\n width: 6em;\n height: 2.5em;\n background: var(--crystal-panel-color);\n border-radius: 1.25em;\n cursor: pointer;\n position: absolute;\n bottom: 0.75em;\n box-shadow: inset 0 0.3em 0.5em var(--shadow-color);\n}\n.charge-switch-handle {\n width: 2em;\n height: 2em;\n background: var(--crystal-color-idle);\n border-radius: 50%;\n position: absolute;\n top: 0.25em;\n left: 0.25em;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n box-shadow: 0 0 1em var(--crystal-glow-idle);\n}\n.charge-switch-label:hover .charge-switch-handle {\n filter: brightness(1.2);\n}\n.crystal-charge-checkbox:checked ~ .charge-switch-label .charge-switch-handle {\n transform: translateX(3.5em);\n background: var(--crystal-color-active);\n box-shadow: 0 0 1em var(--crystal-glow-active);\n}\n@keyframes crystal-pulse {\n 50% {\n transform: scale(1.05);\n }\n}\n@keyframes facet-flicker {\n 50% {\n opacity: 0.5;\n }\n}\n@keyframes facet-flicker-active {\n 50% {\n opacity: 0.8;\n transform: rotate(5deg) scale(0.9);\n }\n}\n"}

calm-wasp-35

👁 实时预览

📝 源代码