9.7K views
1.wrapper { 2 width: 200px; 3 height: 60px; 4 position: relative; 5 z-index: 1; 6} 7 8.circle { 9 width: 20px; 10 height: 20px; 11 position: absolute; 12 border-radius: 50%; 13 background-color: #fff; 14 left: 15%; 15 transform-origin: 50%; 16 animation: circle7124 .5s alternate infinite ease; 17} 18 19@keyframes circle7124 { 20 0% { 21 top: 60px; 22 height: 5px; 23 border-radius: 50px 50px 25px 25px; 24 transform: scaleX(1.7); 25 } 26 27 40% { 28 height: 20px; 29 border-radius: 50%; 30 transform: scaleX(1); 31 } 32 33 100% { 34 top: 0%; 35 } 36} 37 38.circle:nth-child(2) { 39 left: 45%; 40 animation-delay: .2s; 41} 42 43.circle:nth-child(3) { 44 left: auto; 45 right: 15%; 46 animation-delay: .3s; 47} 48 49.shadow { 50 width: 20px; 51 height: 4px; 52 border-radius: 50%; 53 background-color: rgba(0,0,0,0.9); 54 position: absolute; 55 top: 62px; 56 transform-origin: 50%; 57 z-index: -1; 58 left: 15%; 59 filter: blur(1px); 60 animation: shadow046 .5s alternate infinite ease; 61} 62 63@keyframes shadow046 { 64 0% { 65 transform: scaleX(1.5); 66 } 67 68 40% { 69 transform: scaleX(1); 70 opacity: .7; 71 } 72 73 100% { 74 transform: scaleX(.2); 75 opacity: .4; 76 } 77} 78 79.shadow:nth-child(4) { 80 left: 45%; 81 animation-delay: .2s 82} 83 84.shadow:nth-child(5) { 85 left: auto; 86 right: 15%; 87 animation-delay: .3s; 88} 89
MIT License