{"html":"

40%

\n","css":".progress-container {\n position: relative;\n width: 60%;\n max-width: 500px;\n height: 20px;\n background: radial-gradient(circle, #1b2735, #090a0f);\n border-radius: 30px;\n overflow: hidden;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);\n box-sizing: border-box;\n border: 1px solid #313131;\n}\n\n.progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 40%;\n background: linear-gradient(90deg, #00f260, #0575e6);\n border-radius: 30px;\n animation: grow 3s ease-in-out forwards;\n box-shadow:\n 0 0 15px #00f260,\n 0 0 30px #0575e6;\n}\n\n.progress-bar::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);\n opacity: 0.5;\n animation: ripple 3s infinite;\n}\n\n.progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 10px;\n font-weight: bold;\n letter-spacing: 1px;\n color: #fff;\n text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);\n z-index: 2;\n}\n\n.particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #fff;\n border-radius: 50%;\n opacity: 0.6;\n animation: float 5s infinite ease-in-out;\n}\n\n@keyframes grow {\n 0% {\n width: 0;\n }\n 100% {\n width: 40%;\n }\n}\n\n@keyframes ripple {\n 0% {\n transform: translate(-50%, -50%) scale(0.5);\n opacity: 0.7;\n }\n 100% {\n transform: translate(-50%, -50%) scale(1.5);\n opacity: 0;\n }\n}\n\n@keyframes float {\n 0% {\n transform: translateY(0) translateX(0);\n }\n 50% {\n transform: translateY(-20px) translateX(10px);\n }\n 100% {\n transform: translateY(0) translateX(0);\n }\n}\n.particle:nth-child(1) {\n top: 10%;\n left: 20%;\n animation-delay: 0s;\n}\n.particle:nth-child(2) {\n top: 30%;\n left: 70%;\n animation-delay: 1s;\n}\n.particle:nth-child(3) {\n top: 50%;\n left: 50%;\n animation-delay: 2s;\n}\n.particle:nth-child(4) {\n top: 80%;\n left: 40%;\n animation-delay: 1.5s;\n}\n.particle:nth-child(5) {\n top: 90%;\n left: 60%;\n animation-delay: 2.5s;\n}\n"}

tall-fly-13

👁 实时预览

📝 源代码