{"html":"

\n","css":".main {\n display: flex;\n flex-wrap: wrap;\n width: 15em;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n width: 40px;\n height: 40px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: 0.4s ease-in-out, 0.2s background-color;\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(5px);\n margin: 0.2em;\n border-radius: 5px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n animation: 2s loading90 infinite;\n}\n\n.card:nth-child(2) {\n animation-delay: 1s;\n}\n\n.card:nth-child(4) {\n animation-delay: 1s;\n}\n\n.card:nth-child(6) {\n animation-delay: 1s;\n}\n\n.card:nth-child(8) {\n animation-delay: 1s;\n}\n\n.card:nth-child(10) {\n animation-delay: 1s;\n}\n\n.card:nth-child(12) {\n animation-delay: 1s;\n}\n\n.card:nth-child(14) {\n animation-delay: 1s;\n}\n\n@keyframes loading90 {\n 0% {\n background: rgba(255, 255, 255, 0.2);\n }\n\n 50% {\n background: limegreen;\n }\n\n 100% {\n background: rgba(255, 255, 255, 0.2);\n }\n}\n"}

itchy-jellyfish-43

👁 实时预览

📝 源代码