{"html":"

\n\n

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

\n\n

\n","css":".parachute-loader {\n width: 300px;\n height: 300px;\n position: relative;\n overflow: hidden;\n background-color: #333;\n border-radius: 12px;\n font-family: sans-serif;\n}\n\n.parachute-loader .wind-line {\n position: absolute;\n width: 2px;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 2px;\n bottom: -50px;\n animation: windUp 0.8s linear infinite;\n}\n\n.parachute-loader .wind-1 {\n left: 20%;\n height: 40px;\n animation-delay: 0s;\n animation-duration: 0.5s;\n}\n.parachute-loader .wind-2 {\n left: 80%;\n height: 60px;\n animation-delay: 0.2s;\n animation-duration: 0.7s;\n}\n.parachute-loader .wind-3 {\n left: 10%;\n height: 30px;\n animation-delay: 0.4s;\n animation-duration: 0.6s;\n}\n.parachute-loader .wind-4 {\n left: 90%;\n height: 50px;\n animation-delay: 0.1s;\n animation-duration: 0.8s;\n}\n.parachute-loader .wind-5 {\n left: 50%;\n height: 25px;\n animation-delay: 0.5s;\n animation-duration: 0.4s;\n}\n\n.parachute-loader .cloud {\n position: absolute;\n background: #fff;\n border-radius: 50%;\n bottom: -100px;\n opacity: 0.8;\n animation: moveCloudsUp 3s linear infinite;\n}\n\n.parachute-loader .cloud::after,\n.parachute-loader .cloud::before {\n content: \"\";\n position: absolute;\n background: inherit;\n border-radius: 50%;\n}\n\n.parachute-loader .cloud-1 {\n width: 60px;\n height: 60px;\n left: 10%;\n animation-duration: 2.5s;\n}\n.parachute-loader .cloud-1::after {\n width: 40px;\n height: 40px;\n top: -20px;\n left: 10px;\n}\n.parachute-loader .cloud-1::before {\n width: 50px;\n height: 50px;\n top: -10px;\n left: 30px;\n}\n\n.parachute-loader .cloud-2 {\n width: 80px;\n height: 80px;\n right: 15%;\n animation-duration: 3.2s;\n animation-delay: 1s;\n opacity: 0.6;\n}\n.parachute-loader .cloud-2::after {\n width: 50px;\n height: 50px;\n top: -25px;\n left: 15px;\n}\n.parachute-loader .cloud-2::before {\n width: 60px;\n height: 60px;\n top: -15px;\n left: 40px;\n}\n\n.parachute-loader .parachutist-wrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 120px;\n animation: sway 3s ease-in-out infinite;\n z-index: 10;\n}\n\n.parachute-loader .parachute-svg {\n width: 100%;\n height: 100%;\n display: block;\n filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));\n}\n\n.parachute-loader .loading-text {\n position: absolute;\n bottom: 20px;\n width: 100%;\n text-align: center;\n color: white;\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 2px;\n text-transform: uppercase;\n animation: pulse 1.5s infinite;\n z-index: 20;\n}\n\n@keyframes sway {\n 0%,\n 100% {\n transform: translate(-50%, -50%) rotate(-5deg);\n }\n 50% {\n transform: translate(-50%, -45%) rotate(5deg);\n }\n}\n\n@keyframes moveCloudsUp {\n 0% {\n bottom: -100px;\n opacity: 0;\n }\n 20% {\n opacity: 0.9;\n }\n 80% {\n opacity: 0.9;\n }\n 100% {\n bottom: 350px;\n opacity: 0;\n }\n}\n\n@keyframes windUp {\n 0% {\n bottom: -60px;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n bottom: 350px;\n opacity: 0;\n }\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n"}

calm-octopus-42

👁 实时预览

📝 源代码