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
mobinkakei
