{"html":"

\n","css":".background {\n width: 80px;\n height: 80px;\n background-color: #000;\n position: absolute;\n z-index: -1;\n border-radius: 10px;\n box-shadow: 10px 5px 30px;\n}\n\n.load-container {\n width: 70px;\n height: 70px;\n display: grid;\n grid-template-columns: repeat(5, 10px);\n grid-template-rows: repeat(5, 10px);\n gap: 5px;\n}\n\n.ball {\n width: 10px;\n height: 10px;\n background: red;\n border-radius: 10px;\n animation: size 1s infinite ease-in-out;\n}\n\n.ball:nth-child(1) {\n animation-delay: 0s;\n}\n.ball:nth-child(2) {\n animation-delay: -0.1s;\n}\n.ball:nth-child(3) {\n animation-delay: -0.2s;\n}\n.ball:nth-child(4) {\n animation-delay: -0.3s;\n}\n.ball:nth-child(5) {\n animation-delay: -0.4s;\n}\n.ball:nth-child(6) {\n animation-delay: -0.5s;\n}\n.ball:nth-child(7) {\n animation-delay: -0.6s;\n}\n.ball:nth-child(8) {\n animation-delay: -0.7s;\n}\n.ball:nth-child(9) {\n animation-delay: -0.8s;\n}\n.ball:nth-child(10) {\n animation-delay: -0.9s;\n}\n.ball:nth-child(11) {\n animation-delay: -1s;\n}\n.ball:nth-child(12) {\n animation-delay: -1.1s;\n}\n.ball:nth-child(13) {\n animation-delay: -1.2s;\n}\n.ball:nth-child(14) {\n animation-delay: -1.3s;\n}\n.ball:nth-child(15) {\n animation-delay: -1.4s;\n}\n.ball:nth-child(16) {\n animation-delay: -1.5s;\n}\n.ball:nth-child(17) {\n animation-delay: -1.6s;\n}\n.ball:nth-child(18) {\n animation-delay: -1.7s;\n}\n.ball:nth-child(19) {\n animation-delay: -1.8s;\n}\n.ball:nth-child(20) {\n animation-delay: -1.9s;\n}\n.ball:nth-child(21) {\n animation-delay: -2s;\n}\n.ball:nth-child(22) {\n animation-delay: -2.1s;\n}\n.ball:nth-child(23) {\n animation-delay: -2.2s;\n}\n.ball:nth-child(24) {\n animation-delay: -2.3s;\n}\n.ball:nth-child(25) {\n animation-delay: -2.5s;\n}\n\n.ball:nth-child(even) {\n background: blue;\n}\n\n@keyframes size {\n 0% {\n transform: scale(0.2);\n }\n 50% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.2);\n }\n}\n"}

smart-bear-65

👁 实时预览

📝 源代码