{"html":"

\n","css":".loader {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n}\n\n.circle {\n background: rgba(50, 120, 180, 1);\n width: 15px;\n height: 15px;\n position: absolute;\n border-radius: 50%;\n animation: figureEight 1.5s linear infinite;\n}\n\n.circle:nth-child(2) {\n animation-delay: 0.1s;\n width: 12px;\n height: 12px;\n background: rgba(50, 120, 180, 0.5);\n}\n\n.circle:nth-child(3) {\n animation-delay: 0.2s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.35);\n}\n\n.circle:nth-child(4) {\n animation-delay: 0.3s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.15);\n}\n\n.circle:nth-child(5) {\n animation-delay: 0.4s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.15);\n}\n\n.circle:nth-child(6) {\n animation-delay: 0.5s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.15);\n}\n\n.circle:nth-child(7) {\n animation-delay: 0.6s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.15);\n}\n\n.circle:nth-child(8) {\n animation-delay: 0.7s;\n width: 10px;\n height: 10px;\n background: rgba(50, 120, 180, 0.15);\n}\n\n@keyframes figureEight {\n 0%,\n 100% {\n transform: translate(0, 0);\n }\n 12.5% {\n transform: translate(50px, -25px);\n }\n 25% {\n transform: translate(100px, 0);\n }\n 37.5% {\n transform: translate(50px, 25px);\n }\n 50% {\n transform: translate(0, 0);\n }\n 62.5% {\n transform: translate(-50px, -25px);\n }\n 75% {\n transform: translate(-100px, 0);\n }\n 87.5% {\n transform: translate(-50px, 25px);\n }\n}\n"}

mean-fireant-26

👁 实时预览

📝 源代码