1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
|
:root { --card-padding: 24px; --card-height: 340px; --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0); --avatar-size: 32px; --avatar-position: var(--card-padding) var(--card-padding); --avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0 ); --title-height: 32px; --title-width: 200px; --title-position: var(--card-padding) 180px; --title-skeleton: linear-gradient(white var(--title-height), transparent 0); --desc-line-height: 16px; --desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0); --desc-line-1-width:230px; --desc-line-1-position: var(--card-padding) 242px; --desc-line-2-width:180px; --desc-line-2-position: var(--card-padding) 265px; --footer-height: 40px; --footer-position: 0 calc(var(--card-height) - var(--footer-height)); --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0); --blur-width: 200px; --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height)); }
.card { width: 280px; height: var(--card-height); } .card:empty::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 10px 45px rgba(0, 0, 0, 0.1); background-image: linear-gradient(90deg, rgba(211, 211, 211, 0) 0, rgba(211, 211, 211, 0.8) 50%, rgba(211, 211, 211, 0) 100%), var(--title-skeleton), var(--desc-line-skeleton), var(--desc-line-skeleton), var(--avatar-skeleton), var(--footer-skeleton), var(--card-skeleton); background-size: var(--blur-size), var(--title-width) var(--title-height), var(--desc-line-1-width) var(--desc-line-height), var(--desc-line-2-width) var(--desc-line-height), var(--avatar-size) var(--avatar-size), 100% var(--footer-height), 100% 100%; background-position: -200% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0; background-repeat: no-repeat; -webkit-animation: loading 1.5s infinite; animation: loading 1.5s infinite; }
@-webkit-keyframes loading { to { background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0; } }
@keyframes loading { to { background-position: 350% 0, var(--title-position), var(--desc-line-1-position), var(--desc-line-2-position), var(--avatar-position), var(--footer-position), 0 0; } }
body { min-height: 100vh; background-color: #FFF; display: flex; justify-content: center; align-items: center; }
|