1.bubble {
2  position: absolute;
3  width: 200px;
4  height: 200px;
5  border-radius: 50%;
6  box-shadow: inset 0 0 25px rgba (255, 255, 255, 0.25);
7  animation: animate_4010 8s ease-in-out infinite;
8}
9
10.bubble:nth-child(2) {
11  position: relative;
12  zoom: 0.45;
13  left: -10px;
14  top: -100px;
15  animation-delay: -4s;
16}
17
18.bubble:nth-child(3) {
19  position: relative;
20  zoom: 0.45;
21  right: -80px;
22  top: -300px;
23  animation-delay: -6s;
24}
25
26.bubble:nth-child(4) {
27  position: relative;
28  zoom: 0.35;
29  left: -120px;
30  bottom: -200px;
31  animation-delay: -3s;
32}
33
34.bubble:nth-child(5) {
35  position: relative;
36  zoom: 0.5;
37  left: 0px;
38  top: 200px;
39  animation-delay: -5s;
40}
41
42@keyframes animate_4010 {
43  0%,100% {
44    transform: translateY(-20px);
45  }
46
47  50% {
48    transform: translateY(20px);
49  }
50}
51
52.bubble::before {
53  content: '';
54  position: absolute;
55  top: 50px;
56  left: 45px;
57  width: 30px;
58  height: 30px;
59  border-radius: 50%;
60  background: #fff;
61  z-index: 10;
62  filter: blur(2px);
63}
64
65.bubble::after {
66  content: '';
67  position: absolute;
68  top: 80px;
69  left: 80px;
70  width: 20px;
71  height: 20px;
72  border-radius: 50%;
73  background: #fff;
74  z-index: 10;
75  filter: blur(2px);
76}
77
78.bubble span {
79  position: absolute;
80  border-radius: 50%;
81}
82
83.bubble span:nth-child(1) {
84  inset: 10px;
85  border-left: 15px solid #0fb4ff;
86  filter: blur(8px);
87}
88
89.bubble span:nth-child(2) {
90  inset: 10px;
91  border-right: 15px solid #ff4484;
92  filter: blur(8px);
93}
94
95.bubble span:nth-child(3) {
96  inset: 10px;
97  border-top: 15px solid #ffeb3b;
98  filter: blur(8px);
99}
100
101.bubble span:nth-child(4) {
102  inset: 30px;
103  border-left: 15px solid #ff4484;
104  filter: blur(12px);
105}
106
107.bubble span:nth-child(5) {
108  inset: 10px;
109  border-bottom: 10px solid #fff;
110  filter: blur(8px);
111  transform: rotate(330deg);
112}