{"html":"

\n","css":"loading {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.loading-box {\n width: 250px;\n height: 100px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n position: relative;\n}\n\n.color {\n background-color: #3395ff;\n}\n.WH {\n width: 10px;\n height: 70px;\n position: absolute;\n}\n\n.l1 {\n left: 0;\n animation: l1 4s infinite linear;\n}\n.l2 {\n right: 0;\n animation: l2 4s infinite linear;\n}\n.ball {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n position: absolute;\n animation: ball 4s infinite linear;\n}\n\n@keyframes l1 {\n 0% {\n top: 0%;\n }\n 10% {\n top: -20%;\n }\n 20% {\n top: 0%;\n }\n 30% {\n top: 40%;\n }\n 40% {\n top: 0%;\n }\n 50% {\n top: 30%;\n }\n 60% {\n top: 40%;\n }\n 70% {\n top: 60%;\n }\n 80% {\n top: -10%;\n }\n 90% {\n top: 10%;\n }\n 100% {\n top: 0%;\n }\n}\n@keyframes l2 {\n 0% {\n bottom: 0%;\n }\n 10% {\n bottom: -20%;\n }\n 20% {\n bottom: 40%;\n }\n 30% {\n bottom: 60%;\n }\n 40% {\n bottom: 20%;\n }\n 50% {\n bottom: 30%;\n }\n 60% {\n bottom: 40%;\n }\n 70% {\n bottom: 60%;\n }\n 80% {\n bottom: -10%;\n }\n 90% {\n bottom: 10%;\n }\n 100% {\n bottom: 0%;\n }\n}\n@keyframes ball {\n 0% {\n top: 80%;\n left: 96%;\n }\n 10% {\n top: 10%;\n left: 3%;\n }\n 20% {\n top: 10%;\n left: 90%;\n }\n 30% {\n top: 60%;\n left: 3%;\n }\n 40% {\n top: 10%;\n left: 90%;\n }\n 50% {\n top: 50%;\n left: 3%;\n }\n 60% {\n top: 10%;\n left: 90%;\n }\n 70% {\n top: 93%;\n left: 3%;\n }\n 80% {\n top: 83%;\n left: 90%;\n }\n 90% {\n top: 10%;\n left: 3%;\n }\n 100% {\n top: 80%;\n left: 90%;\n }\n}\n"}

green-lion-91

👁 实时预览

📝 源代码