{"html":"

\n L\n o\n a\n d\n i\n n\n g\n

\n","css":".loader-stage {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n width: 100%;\n background-color: #1a1a2e;\n overflow: hidden;\n user-select: none;\n}\n\n.sleep-container {\n --lavender: #a29bfe;\n --mint: #81ecec;\n --depth-l: #6c5ce7;\n --depth-m: #00cec9;\n --glow: rgba(162, 155, 254, 0.3);\n --fs: 4.5em;\n --breath-speed: 3s;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.sleep-group {\n display: flex;\n gap: 0.05em;\n font-family: \"Arial Rounded MT Bold\", \"Helvetica Rounded\", system-ui,\n sans-serif;\n font-size: var(--fs);\n font-weight: 900;\n perspective: 1200px;\n}\n\n.sleep-letter {\n display: inline-block;\n position: relative;\n color: var(--lavender);\n transform-origin: center bottom;\n filter: drop-shadow(0 0.1em 0.5em var(--glow));\n animation:\n breathing var(--breath-speed) infinite ease-in-out,\n nodding calc(var(--breath-speed) * 2) infinite ease-in-out;\n\n text-shadow:\n 0 0.01em 0 var(--depth-l),\n 0 0.02em 0 var(--depth-l),\n 0 0.03em 0 var(--depth-l),\n 0 0.04em 0 var(--depth-l),\n 0 0.05em 0 var(--depth-l),\n 0 0.1em 0.2em rgba(0, 0, 0, 0.4);\n}\n\n.sleep-letter::after {\n content: \"z\";\n position: absolute;\n top: -20%;\n right: -10%;\n font-size: 0.3em;\n color: white;\n opacity: 0;\n font-weight: 400;\n animation: floating-z 4s infinite;\n}\n\n.sleep-letter:nth-child(even) {\n color: var(--mint);\n text-shadow:\n 0 0.01em 0 var(--depth-m),\n 0 0.02em 0 var(--depth-m),\n 0 0.03em 0 var(--depth-m),\n 0 0.04em 0 var(--depth-m),\n 0 0.05em 0 var(--depth-m),\n 0 0.1em 0.2em rgba(0, 0, 0, 0.4);\n}\n\n.sleep-letter:nth-child(even)::after {\n content: \"Z\";\n animation-delay: 1.5s;\n}\n\n.sleep-letter:nth-child(1) {\n animation-delay: 0s;\n}\n.sleep-letter:nth-child(2) {\n animation-delay: 0.3s;\n}\n.sleep-letter:nth-child(3) {\n animation-delay: 0.6s;\n}\n.sleep-letter:nth-child(4) {\n animation-delay: 0.9s;\n}\n.sleep-letter:nth-child(5) {\n animation-delay: 1.2s;\n}\n.sleep-letter:nth-child(6) {\n animation-delay: 1.5s;\n}\n.sleep-letter:nth-child(7) {\n animation-delay: 1.8s;\n}\n\n.sleep-shadow {\n width: 13em;\n height: 0.6em;\n background: radial-gradient(\n ellipse at center,\n rgba(162, 155, 254, 0.2) 0%,\n transparent 70%\n );\n border-radius: 50%;\n margin-top: 0.8em;\n animation: shadow-breath var(--breath-speed) infinite ease-in-out;\n}\n\n@keyframes breathing {\n 0%,\n 100% {\n transform: scale(1) translateY(0);\n filter: brightness(1);\n }\n 50% {\n transform: scale(1.08, 0.95) translateY(0.1em);\n filter: brightness(1.2);\n }\n}\n\n@keyframes nodding {\n 0%,\n 100% {\n transform: rotate(-5deg);\n }\n 50% {\n transform: rotate(5deg);\n }\n}\n\n@keyframes floating-z {\n 0% {\n opacity: 0;\n transform: translate(0, 0) scale(0.5) rotate(0deg);\n }\n 20% {\n opacity: 0.8;\n }\n 100% {\n opacity: 0;\n transform: translate(1em, -3em) scale(1.5) rotate(20deg);\n }\n}\n\n@keyframes shadow-breath {\n 0%,\n 100% {\n transform: scaleX(1);\n opacity: 0.3;\n }\n 50% {\n transform: scaleX(1.3);\n opacity: 0.6;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sleep-letter,\n .sleep-shadow,\n .sleep-letter::after {\n animation: none !important;\n transform: none !important;\n }\n}\n"}

honest-impala-27

👁 实时预览

📝 源代码