#212121
1.main { 2 display: flex; 3 flex-wrap: wrap; 4 width: 15em; 5 align-items: center; 6 justify-content: center; 7} 8 9.card { 10 width: 40px; 11 height: 40px; 12 border-top-left-radius: 10px; 13 background: lightgrey; 14 transition: .4s ease-in-out, .2s background-color; 15 background: rgba(255, 255, 255, 0.2); 16 backdrop-filter: blur(5px); 17 margin: .2em; 18 border-radius: 5px; 19 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 20 border: 1px solid rgba(255, 255, 255, 0.3); 21 animation: 2s loading90 infinite; 22} 23 24.card:nth-child(2) { 25 animation-delay: 1s; 26} 27 28.card:nth-child(4) { 29 animation-delay: 1s; 30} 31 32.card:nth-child(6) { 33 animation-delay: 1s; 34} 35 36.card:nth-child(8) { 37 animation-delay: 1s; 38} 39 40.card:nth-child(10) { 41 animation-delay: 1s; 42} 43 44.card:nth-child(12) { 45 animation-delay: 1s; 46} 47 48.card:nth-child(14) { 49 animation-delay: 1s; 50} 51 52@keyframes loading90 { 53 0% { 54 background: rgba(255, 255, 255, 0.2); 55 } 56 57 50% { 58 background: limegreen; 59 } 60 61 100% { 62 background: rgba(255, 255, 255, 0.2); 63 } 64}
Comments
MIT License