{"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: #ffffff;\n overflow: hidden;\n user-select: none;\n}\n\n.pixar-container {\n --yellow: #feca57;\n --red: #ff6b6b;\n --blue: #48dbfb;\n --depth-y: #e1ad21;\n --depth-r: #ee5253;\n --shadow-clr: rgba(0, 0, 0, 0.08);\n --fs: 4.5em;\n --bounce-ease: cubic-bezier(0.68, -0.6, 0.32, 1.6);\n\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.laughing-group {\n display: flex;\n gap: 0.08em;\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: 800px;\n}\n\n.toy-letter {\n display: inline-block;\n position: relative;\n color: var(--yellow);\n transform-origin: center bottom;\n filter: drop-shadow(0 0.1em 0.2em var(--shadow-clr));\n animation:\n laugh-bounce 0.6s infinite alternate var(--bounce-ease),\n laugh-wobble 0.3s infinite alternate ease-in-out;\n text-shadow:\n 0 0.01em 0 var(--depth-y),\n 0 0.02em 0 var(--depth-y),\n 0 0.03em 0 var(--depth-y),\n 0 0.04em 0 var(--depth-y),\n 0 0.05em 0 var(--depth-y),\n 0 0.06em 0 var(--depth-y),\n 0 0.07em 0.1em rgba(0, 0, 0, 0.2);\n}\n\n.toy-letter::after {\n content: \"\";\n position: absolute;\n top: 10%;\n left: 15%;\n width: 35%;\n height: 20%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 100%;\n filter: blur(2px);\n pointer-events: none;\n}\n\n.toy-letter:nth-child(even) {\n color: var(--red);\n animation-delay: 0.1s;\n text-shadow:\n 0 0.01em 0 var(--depth-r),\n 0 0.02em 0 var(--depth-r),\n 0 0.03em 0 var(--depth-r),\n 0 0.04em 0 var(--depth-r),\n 0 0.05em 0 var(--depth-r),\n 0 0.06em 0 var(--depth-r),\n 0 0.07em 0.1em rgba(0, 0, 0, 0.2);\n}\n\n.toy-letter:nth-child(1) {\n animation-delay: 0.05s;\n}\n.toy-letter:nth-child(2) {\n animation-delay: 0.12s;\n}\n.toy-letter:nth-child(3) {\n animation-delay: 0.08s;\n}\n.toy-letter:nth-child(4) {\n animation-delay: 0.15s;\n}\n.toy-letter:nth-child(5) {\n animation-delay: 0.03s;\n}\n.toy-letter:nth-child(6) {\n animation-delay: 0.1s;\n}\n.toy-letter:nth-child(7) {\n animation-delay: 0.18s;\n}\n\n.ground-shadow {\n width: 12em;\n height: 0.8em;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 0, 0, 0.1) 0%,\n transparent 75%\n );\n border-radius: 50%;\n margin-top: 0.5em;\n animation: shadow-morph 0.6s infinite alternate var(--bounce-ease);\n}\n\n@keyframes laugh-bounce {\n 0% {\n transform: translateY(0) scale(1.1, 0.85);\n }\n 100% {\n transform: translateY(-0.5em) scale(0.95, 1.1) rotate(-5deg);\n }\n}\n\n@keyframes laugh-wobble {\n 0% {\n transform: rotate(-2deg);\n }\n 100% {\n transform: rotate(2deg);\n }\n}\n\n@keyframes shadow-morph {\n 0% {\n transform: scaleX(1.1);\n opacity: 0.6;\n filter: blur(2px);\n }\n 100% {\n transform: scaleX(0.7);\n opacity: 0.2;\n filter: blur(5px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .toy-letter,\n .ground-shadow {\n animation: none !important;\n transform: none !important;\n }\n}\n"}

polite-walrus-78

👁 实时预览

📝 源代码