{"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","css":".loader-container {\n /* Variables scoped to the component */\n --bal-bg-top: #00d2ff;\n --bal-bg-bottom: #3a7bd5;\n --bal-bird-primary: #ff5e62;\n --bal-bird-secondary: #ff9966;\n --bal-bird-highlight: #fff3b0;\n --bal-cloud-color: rgba(255, 255, 255, 0.85);\n --bal-wind-color: rgba(255, 255, 255, 0.4);\n --bal-text-color: #ffffff;\n\n width: 320px;\n height: 320px;\n position: relative;\n overflow: hidden;\n background: linear-gradient(\n 135deg,\n var(--bal-bg-top) 0%,\n var(--bal-bg-bottom) 100%\n );\n border-radius: 40px;\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);\n border: 2px solid rgba(255, 255, 255, 0.2);\n font-family: \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n /* Enable 3D perspective */\n perspective: 800px;\n\n /* Using relative positioning for the component itself instead of fixed or absolute centering */\n margin: 20px auto;\n}\n\n/* Scoped Environment Styles */\n.loader-container .wind-line {\n position: absolute;\n width: 2px;\n background: var(--bal-wind-color);\n border-radius: 4px;\n top: -100px;\n animation: balWindFall 0.4s linear infinite;\n}\n\n.loader-container .wind-1 {\n left: 10%;\n height: 80px;\n animation-duration: 0.3s;\n}\n.loader-container .wind-2 {\n left: 90%;\n height: 100px;\n animation-duration: 0.5s;\n animation-delay: 0.1s;\n}\n.loader-container .wind-3 {\n left: 50%;\n height: 50px;\n animation-duration: 0.4s;\n animation-delay: 0.3s;\n}\n.loader-container .wind-4 {\n left: 75%;\n height: 70px;\n animation-duration: 0.35s;\n animation-delay: 0.2s;\n}\n\n.loader-container .cloud {\n position: absolute;\n background: var(--bal-cloud-color);\n border-radius: 50px;\n top: -150px;\n filter: blur(4px);\n animation: balCloudFall 3s linear infinite;\n}\n\n.loader-container .cloud::after,\n.loader-container .cloud::before {\n content: \"\";\n position: absolute;\n background: inherit;\n border-radius: 50%;\n}\n\n.loader-container .cloud-1 {\n width: 80px;\n height: 30px;\n left: -10px;\n animation-duration: 2.5s;\n}\n.loader-container .cloud-1::after {\n width: 40px;\n height: 40px;\n top: -15px;\n left: 15px;\n}\n\n.loader-container .cloud-2 {\n width: 100px;\n height: 40px;\n right: -20px;\n animation-duration: 4s;\n animation-delay: 1s;\n}\n.loader-container .cloud-2::after {\n width: 50px;\n height: 50px;\n top: -20px;\n left: 25px;\n}\n\n/* Scoped Bird Animation Styles */\n.loader-container .bird-wrapper {\n position: absolute;\n top: 48%;\n left: 50%;\n transform-style: preserve-3d;\n transform: translate(-50%, -50%);\n width: 140px;\n height: 140px;\n z-index: 10;\n animation: balGentleBob 2s ease-in-out infinite;\n}\n\n.loader-container .bird-svg {\n width: 100%;\n height: 100%;\n overflow: visible;\n filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.3));\n}\n\n.loader-container .wing-right {\n transform-origin: 256px 256px;\n animation: balFlapRight3D 0.4s ease-in-out infinite alternate;\n}\n\n.loader-container .wing-left {\n transform-origin: 256px 256px;\n animation: balFlapLeft3D 0.4s ease-in-out infinite alternate;\n}\n\n@keyframes balFlapRight3D {\n 0% {\n transform: rotateZ(30deg) rotateY(0deg) rotateX(0deg) scale(0.9);\n }\n 100% {\n transform: rotateZ(-20deg) rotateY(-40deg) rotateX(20deg) scale(1.1);\n }\n}\n\n@keyframes balFlapLeft3D {\n 0% {\n transform: rotateZ(-30deg) rotateY(0deg) rotateX(0deg) scale(0.9);\n }\n 100% {\n transform: rotateZ(20deg) rotateY(40deg) rotateX(20deg) scale(1.1);\n }\n}\n\n@keyframes balGentleBob {\n 0%,\n 100% {\n transform: translate(-50%, -50%) rotateX(5deg);\n }\n 50% {\n transform: translate(-50%, -56%) rotateX(15deg);\n }\n}\n\n@keyframes balCloudFall {\n 0% {\n top: -150px;\n opacity: 0;\n }\n 20% {\n opacity: 0.8;\n }\n 100% {\n top: 400px;\n opacity: 0;\n }\n}\n\n@keyframes balWindFall {\n 0% {\n top: -100px;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n top: 400px;\n opacity: 0;\n }\n}\n\n.loader-container .loading-text {\n position: absolute;\n bottom: 30px;\n width: 100%;\n text-align: center;\n color: var(--bal-text-color);\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 3px;\n text-transform: uppercase;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n z-index: 20;\n}\n"}

cuddly-liger-14

👁 实时预览

📝 源代码