#e8e8e8
1.container { 2 width: 80px; 3 height: 100px; 4} 5 6.block { 7 position: relative; 8 box-sizing: border-box; 9 float: left; 10 margin: 0 10px 10px 0; 11 width: 12px; 12 height: 12px; 13 border-radius: 3px; 14 background: #FFF; 15} 16 17.block:nth-child(4n+1) { 18 animation: wave_61 2s ease .0s infinite; 19} 20 21.block:nth-child(4n+2) { 22 animation: wave_61 2s ease .2s infinite; 23} 24 25.block:nth-child(4n+3) { 26 animation: wave_61 2s ease .4s infinite; 27} 28 29.block:nth-child(4n+4) { 30 animation: wave_61 2s ease .6s infinite; 31 margin-right: 0; 32} 33 34@keyframes wave_61 { 35 0% { 36 top: 0; 37 opacity: 1; 38 } 39 40 50% { 41 top: 30px; 42 opacity: .2; 43 } 44 45 100% { 46 top: 0; 47 opacity: 1; 48 } 49}
Comments
MIT License