{"html":"

","css":"@keyframes square-animation {\n 0% {\n left: 0;\n top: 0;\n }\n\n 10.5% {\n left: 0;\n top: 0;\n }\n\n 12.5% {\n left: 32px;\n top: 0;\n }\n\n 23% {\n left: 32px;\n top: 0;\n }\n\n 25% {\n left: 64px;\n top: 0;\n }\n\n 35.5% {\n left: 64px;\n top: 0;\n }\n\n 37.5% {\n left: 64px;\n top: 32px;\n }\n\n 48% {\n left: 64px;\n top: 32px;\n }\n\n 50% {\n left: 32px;\n top: 32px;\n }\n\n 60.5% {\n left: 32px;\n top: 32px;\n }\n\n 62.5% {\n left: 32px;\n top: 64px;\n }\n\n 73% {\n left: 32px;\n top: 64px;\n }\n\n 75% {\n left: 0;\n top: 64px;\n }\n\n 85.5% {\n left: 0;\n top: 64px;\n }\n\n 87.5% {\n left: 0;\n top: 32px;\n }\n\n 98% {\n left: 0;\n top: 32px;\n }\n\n 100% {\n left: 0;\n top: 0;\n }\n}\n\n.loader {\n position: relative;\n width: 96px;\n height: 96px;\n transform: rotate(45deg);\n}\n\n.loader-square {\n position: absolute;\n top: 0;\n left: 0;\n width: 28px;\n height: 28px;\n margin: 2px;\n border-radius: 0px;\n background: white;\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n animation: square-animation 10s ease-in-out infinite both;\n}\n\n.loader-square:nth-of-type(0) {\n animation-delay: 0s;\n}\n\n.loader-square:nth-of-type(1) {\n animation-delay: -1.4285714286s;\n}\n\n.loader-square:nth-of-type(2) {\n animation-delay: -2.8571428571s;\n}\n\n.loader-square:nth-of-type(3) {\n animation-delay: -4.2857142857s;\n}\n\n.loader-square:nth-of-type(4) {\n animation-delay: -5.7142857143s;\n}\n\n.loader-square:nth-of-type(5) {\n animation-delay: -7.1428571429s;\n}\n\n.loader-square:nth-of-type(6) {\n animation-delay: -8.5714285714s;\n}\n\n.loader-square:nth-of-type(7) {\n animation-delay: -10s;\n}"}

grumpy-stingray-26

👁 实时预览

📝 源代码