{"html":"\n

\n","css":".card {\n --gray: rgba(229, 231, 235, 1);\n width: 350px;\n height: 13rem;\n display: flex;\n grid-gap: 1.25rem;\n gap: 1.25rem;\n border-radius: 1rem;\n background-color: rgba(255, 255, 255, 1);\n padding: 1.5rem;\n}\n\n.card-1 {\n width: 40%;\n border-radius: 0.75rem;\n background-color: var(--gray);\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;\n}\n\n.right {\n display: flex;\n flex: 1 1 0%;\n flex-direction: column;\n grid-gap: 1.25rem;\n gap: 1.25rem;\n}\n\n.card-2 {\n height: 3.5rem;\n width: 100%;\n border-radius: 1rem;\n background-color: var(--gray);\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;\n}\n\n.card-3 {\n height: 0.75rem;\n width: 100%;\n border-radius: 1rem;\n background-color: var(--gray);\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;\n}\n\n.bottom {\n margin-top: auto;\n display: flex;\n grid-gap: 0.75rem;\n gap: 0.75rem;\n}\n\n.card-4 {\n height: 2rem;\n width: 33%;\n border-radius: 9999px;\n background-color: var(--gray);\n animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;\n}\n\n@keyframes pulse {\n to {\n opacity: .2;\n }\n}"}

curvy-otter-58

👁 实时预览

📝 源代码