{"html":"

\n","css":".loader {\n display: flex;\n max-width: 350;\n position: relative;\n gap: 20px;\n justify-content: space-evenly;\n animation: rotate 3s linear infinite;\n color: white;\n}\n\n.loading {\n}\n\n.orb {\n width: 25px;\n height: 25px;\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n position: absolute;\n}\n\n.orb:nth-child(1) {\n top: 20px;\n left: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(2) {\n top: 20px;\n right: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(3) {\n bottom: 20px;\n left: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(4) {\n bottom: 20px;\n right: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(5) {\n top: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(6) {\n bottom: 20px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(7) {\n left: 20px;\n top: -12.5px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(8) {\n right: 20px;\n top: -12.5px;\n animation: bounce2 1.5s ease 1s infinite;\n}\n\n.orb:nth-child(9) {\n top: -12.5px;\n animation: bounce 1.5s ease 1.5s infinite;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 25% {\n transform: rotate(90deg);\n }\n\n 50% {\n transform: rotate(180deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.5);\n }\n}\n\n@keyframes bounce2 {\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.5);\n }\n}\n"}

quick-otter-37

👁 实时预览

📝 源代码