div+css实现水中气泡上浮动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现水中气泡上浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(180deg, #4291d1, #021d33);
}
.bubbles {
position: absolute;
width: 120vw;
height: 100vh;
left: -10vw;
}
.bubble {
position: absolute;
top: -5vmin;
}
.bubble:nth-child(1) {
opacity: 0.57;
width: 16px;
height: 16px;
left: 80.4vw;
animation: fall-1 48s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(1) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-1 {
7.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.3vw;
}
}
.bubble:nth-child(2) {
opacity: 0.01;
width: 6px;
height: 6px;
left: 9.7vw;
animation: fall-2 24s -19.5s ease-in infinite reverse;
}
.bubble:nth-child(2) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-2 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 92.1vw;
}
}
.bubble:nth-child(3) {
opacity: 0.18;
width: 14px;
height: 14px;
left: 104.1vw;
animation: fall-3 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(3) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-3 {
1.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.6vw;
}
}
.bubble:nth-child(4) {
opacity: 0.46;
width: 8px;
height: 8px;
left: 109.8vw;
animation: fall-4 12s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(4) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-4 {
6.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 117.3vw;
}
}
.bubble:nth-child(5) {
opacity: 0.5;
width: 14px;
height: 14px;
left: 0.4vw;
animation: fall-5 60s -24s ease-in infinite reverse;
}
.bubble:nth-child(5) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-5 {
5.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 20vw;
}
}
.bubble:nth-child(6) {
opacity: 0.63;
width: 18px;
height: 18px;
left: 23.8vw;
animation: fall-6 12s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(6) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-6 {
5.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 42.5vw;
}
}
.bubble:nth-child(7) {
opacity: 0.43;
width: 16px;
height: 16px;
left: 55.8vw;
animation: fall-7 36s -30s ease-in infinite reverse;
}
.bubble:nth-child(7) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-7 {
5.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 7.3vw;
}
}
.bubble:nth-child(8) {
opacity: 0.6;
width: 20px;
height: 20px;
left: 12.3vw;
animation: fall-8 60s -15s ease-in infinite reverse;
}
.bubble:nth-child(8) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-8 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 53.5vw;
}
}
.bubble:nth-child(9) {
opacity: 0.06;
width: 14px;
height: 14px;
left: 31.4vw;
animation: fall-9 48s -4.5s ease-in infinite reverse;
}
.bubble:nth-child(9) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-9 {
4.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 36.5vw;
}
}
.bubble:nth-child(10) {
opacity: 0.41;
width: 14px;
height: 14px;
left: 58vw;
animation: fall-10 36s -9s ease-in infinite reverse;
}
.bubble:nth-child(10) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-10 {
7.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 98.6vw;
}
}
.bubble:nth-child(11) {
opacity: 0.31;
width: 16px;
height: 16px;
left: 48.7vw;
animation: fall-11 36s -18s ease-in infinite reverse;
}
.bubble:nth-child(11) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-11 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 30.9vw;
}
}
.bubble:nth-child(12) {
opacity: 0.27;
width: 12px;
height: 12px;
left: 14.8vw;
animation: fall-12 60s -33s ease-in infinite reverse;
}
.bubble:nth-child(12) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-12 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 97.7vw;
}
}
.bubble:nth-child(13) {
opacity: 0.43;
width: 8px;
height: 8px;
left: 61.8vw;
animation: fall-13 12s -10.5s ease-in infinite reverse;
}
.bubble:nth-child(13) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-13 {
4.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 59.3vw;
}
}
.bubble:nth-child(14) {
opacity: 0.24;
width: 14px;
height: 14px;
left: 105.1vw;
animation: fall-14 24s -12s ease-in infinite reverse;
}
.bubble:nth-child(14) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-14 {
4.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 92.1vw;
}
}
.bubble:nth-child(15) {
opacity: 0.57;
width: 18px;
height: 18px;
left: 2.5vw;
animation: fall-15 36s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(15) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-15 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 107.1vw;
}
}
.bubble:nth-child(16) {
opacity: 0.05;
width: 16px;
height: 16px;
left: 114.4vw;
animation: fall-16 60s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(16) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-16 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 66.5vw;
}
}
.bubble:nth-child(17) {
opacity: 0.51;
width: 20px;
height: 20px;
left: 44.9vw;
animation: fall-17 48s -18s ease-in infinite reverse;
}
.bubble:nth-child(17) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-17 {
7.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 57.6vw;
}
}
.bubble:nth-child(18) {
opacity: 0.75;
width: 14px;
height: 14px;
left: 43.9vw;
animation: fall-18 60s -12s ease-in infinite reverse;
}
.bubble:nth-child(18) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-18 {
0.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 16.7vw;
}
}
.bubble:nth-child(19) {
opacity: 0.26;
width: 14px;
height: 14px;
left: 42.4vw;
animation: fall-19 60s -9s ease-in infinite reverse;
}
.bubble:nth-child(19) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-19 {
2.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 97.6vw;
}
}
.bubble:nth-child(20) {
opacity: 0.51;
width: 8px;
height: 8px;
left: 37.8vw;
animation: fall-20 24s -3s ease-in infinite reverse;
}
.bubble:nth-child(20) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-20 {
7.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 114.6vw;
}
}
.bubble:nth-child(21) {
opacity: 0.21;
width: 4px;
height: 4px;
left: 40.9vw;
animation: fall-21 60s -30s ease-in infinite reverse;
}
.bubble:nth-child(21) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-21 {
8.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 59.1vw;
}
}
.bubble:nth-child(22) {
opacity: 0.68;
width: 20px;
height: 20px;
left: 33.2vw;
animation: fall-22 12s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(22) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-22 {
3.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 52.6vw;
}
}
.bubble:nth-child(23) {
opacity: 0.88;
width: 8px;
height: 8px;
left: 76vw;
animation: fall-23 60s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(23) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-23 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 55.3vw;
}
}
.bubble:nth-child(24) {
opacity: 0.25;
width: 2px;
height: 2px;
left: 105.6vw;
animation: fall-24 36s -27s ease-in infinite reverse;
}
.bubble:nth-child(24) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-24 {
5.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 27.4vw;
}
}
.bubble:nth-child(25) {
opacity: 0.08;
width: 8px;
height: 8px;
left: 115.7vw;
animation: fall-25 48s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(25) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-25 {
0.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9.2vw;
}
}
.bubble:nth-child(26) {
opacity: 0.55;
width: 18px;
height: 18px;
left: 108.5vw;
animation: fall-26 24s -4.5s ease-in infinite reverse;
}
.bubble:nth-child(26) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-26 {
3.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.1vw;
}
}
.bubble:nth-child(27) {
opacity: 0.58;
width: 14px;
height: 14px;
left: 98.5vw;
animation: fall-27 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(27) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-27 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 40.3vw;
}
}
.bubble:nth-child(28) {
opacity: 0.85;
width: 18px;
height: 18px;
left: 31vw;
animation: fall-28 48s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(28) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-28 {
3.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 94.1vw;
}
}
.bubble:nth-child(29) {
opacity: 0.44;
width: 4px;
height: 4px;
left: 65.9vw;
animation: fall-29 60s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(29) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-29 {
5.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.4vw;
}
}
.bubble:nth-child(30) {
opacity: 0.72;
width: 10px;
height: 10px;
left: 88.9vw;
animation: fall-30 24s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(30) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-30 {
2.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 10.5vw;
}
}
.bubble:nth-child(31) {
opacity: 0.08;
width: 4px;
height: 4px;
left: 24.4vw;
animation: fall-31 60s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(31) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-31 {
3% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 107.7vw;
}
}
.bubble:nth-child(32) {
opacity: 0.45;
width: 14px;
height: 14px;
left: 3.1vw;
animation: fall-32 24s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(32) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-32 {
2% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 5.1vw;
}
}
.bubble:nth-child(33) {
opacity: 0.09;
width: 6px;
height: 6px;
left: 40.3vw;
animation: fall-33 36s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(33) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-33 {
6.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 8.2vw;
}
}
.bubble:nth-child(34) {
opacity: 0.71;
width: 10px;
height: 10px;
left: 34vw;
animation: fall-34 24s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(34) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-34 {
5.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 39.3vw;
}
}
.bubble:nth-child(35) {
opacity: 0.07;
width: 20px;
height: 20px;
left: 18.4vw;
animation: fall-35 36s -15s ease-in infinite reverse;
}
.bubble:nth-child(35) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-35 {
2.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 70.1vw;
}
}
.bubble:nth-child(36) {
opacity: 0.23;
width: 18px;
height: 18px;
left: 55vw;
animation: fall-36 36s -25.5s ease-in infinite reverse;
}
.bubble:nth-child(36) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-36 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 26.6vw;
}
}
.bubble:nth-child(37) {
opacity: 0.82;
width: 6px;
height: 6px;
left: 50vw;
animation: fall-37 24s -6s ease-in infinite reverse;
}
.bubble:nth-child(37) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-37 {
6% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 68.1vw;
}
}
.bubble:nth-child(38) {
opacity: 0.55;
width: 8px;
height: 8px;
left: 46.9vw;
animation: fall-38 48s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(38) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-38 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 75.8vw;
}
}
.bubble:nth-child(39) {
opacity: 0.63;
width: 14px;
height: 14px;
left: 66.3vw;
animation: fall-39 48s -24s ease-in infinite reverse;
}
.bubble:nth-child(39) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-39 {
0.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 113.3vw;
}
}
.bubble:nth-child(40) {
opacity: 0.17;
width: 6px;
height: 6px;
left: 118.5vw;
animation: fall-40 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(40) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-40 {
2.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 38.5vw;
}
}
.bubble:nth-child(41) {
opacity: 0.2;
width: 14px;
height: 14px;
left: 58.2vw;
animation: fall-41 36s -24s ease-in infinite reverse;
}
.bubble:nth-child(41) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-41 {
6.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 106.8vw;
}
}
.bubble:nth-child(42) {
opacity: 0.32;
width: 16px;
height: 16px;
left: 31.6vw;
animation: fall-42 48s -34.5s ease-in infinite reverse;
}
.bubble:nth-child(42) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-42 {
5.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.7vw;
}
}
.bubble:nth-child(43) {
opacity: 0.86;
width: 18px;
height: 18px;
left: 108vw;
animation: fall-43 48s -10.5s ease-in infinite reverse;
}
.bubble:nth-child(43) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-43 {
3% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 56.8vw;
}
}
.bubble:nth-child(44) {
opacity: 0.6;
width: 8px;
height: 8px;
left: 28.6vw;
animation: fall-44 48s -12s ease-in infinite reverse;
}
.bubble:nth-child(44) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-44 {
2% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 50.5vw;
}
}
.bubble:nth-child(45) {
opacity: 0.36;
width: 20px;
height: 20px;
left: 85.5vw;
animation: fall-45 48s -9s ease-in infinite reverse;
}
.bubble:nth-child(45) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-45 {
0.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 30.8vw;
}
}
.bubble:nth-child(46) {
opacity: 0.61;
width: 8px;
height: 8px;
left: 6.5vw;
animation: fall-46 12s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(46) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-46 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 17.4vw;
}
}
.bubble:nth-child(47) {
opacity: 0.64;
width: 12px;
height: 12px;
left: 85.4vw;
animation: fall-47 60s -27s ease-in infinite reverse;
}
.bubble:nth-child(47) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-47 {
4.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 115.3vw;
}
}
.bubble:nth-child(48) {
opacity: 0.22;
width: 2px;
height: 2px;
left: 88.5vw;
animation: fall-48 48s -22.5s ease-in infinite reverse;
}
.bubble:nth-child(48) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-48 {
1% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 40.2vw;
}
}
.bubble:nth-child(49) {
opacity: 0.79;
width: 20px;
height: 20px;
left: 97.2vw;
animation: fall-49 60s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(49) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-49 {
3.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 84vw;
}
}
.bubble:nth-child(50) {
opacity: 0.81;
width: 8px;
height: 8px;
left: 99.3vw;
animation: fall-50 48s -19.5s ease-in infinite reverse;
}
.bubble:nth-child(50) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-50 {
6.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 118.9vw;
}
}
.bubble:nth-child(51) {
opacity: 0.07;
width: 14px;
height: 14px;
left: 0.4vw;
animation: fall-51 36s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(51) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-51 {
6.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 4.5vw;
}
}
.bubble:nth-child(52) {
opacity: 0.6;
width: 8px;
height: 8px;
left: 46vw;
animation: fall-52 60s -33s ease-in infinite reverse;
}
.bubble:nth-child(52) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-52 {
2.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 61.8vw;
}
}
.bubble:nth-child(53) {
opacity: 0.9;
width: 20px;
height: 20px;
left: 95.6vw;
animation: fall-53 48s -18s ease-in infinite reverse;
}
.bubble:nth-child(53) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-53 {
5.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 91.3vw;
}
}
.bubble:nth-child(54) {
opacity: 0.73;
width: 14px;
height: 14px;
left: 30.1vw;
animation: fall-54 48s -36s ease-in infinite reverse;
}
.bubble:nth-child(54) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-54 {
8.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 1.8vw;
}
}
.bubble:nth-child(55) {
opacity: 0.54;
width: 20px;
height: 20px;
left: 11vw;
animation: fall-55 36s -22.5s ease-in infinite reverse;
}
.bubble:nth-child(55) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-55 {
3% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 91.2vw;
}
}
.bubble:nth-child(56) {
opacity: 0.51;
width: 10px;
height: 10px;
left: 13.6vw;
animation: fall-56 24s -30s ease-in infinite reverse;
}
.bubble:nth-child(56) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-56 {
1.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 76.6vw;
}
}
.bubble:nth-child(57) {
opacity: 0.73;
width: 8px;
height: 8px;
left: 75.7vw;
animation: fall-57 36s -30s ease-in infinite reverse;
}
.bubble:nth-child(57) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-57 {
5.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 35.5vw;
}
}
.bubble:nth-child(58) {
opacity: 0.25;
width: 10px;
height: 10px;
left: 15.7vw;
animation: fall-58 36s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(58) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-58 {
5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 38.7vw;
}
}
.bubble:nth-child(59) {
opacity: 0.47;
width: 8px;
height: 8px;
left: 32.2vw;
animation: fall-59 60s -15s ease-in infinite reverse;
}
.bubble:nth-child(59) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-59 {
4.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 28.8vw;
}
}
.bubble:nth-child(60) {
opacity: 0.77;
width: 6px;
height: 6px;
left: 82.4vw;
animation: fall-60 12s -33s ease-in infinite reverse;
}
.bubble:nth-child(60) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-60 {
2.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 78.1vw;
}
}
.bubble:nth-child(61) {
opacity: 0.61;
width: 6px;
height: 6px;
left: 109.3vw;
animation: fall-61 24s -33s ease-in infinite reverse;
}
.bubble:nth-child(61) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-61 {
5.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 76.4vw;
}
}
.bubble:nth-child(62) {
opacity: 0.39;
width: 8px;
height: 8px;
left: 61.8vw;
animation: fall-62 48s -36s ease-in infinite reverse;
}
.bubble:nth-child(62) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-62 {
2% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 93.6vw;
}
}
.bubble:nth-child(63) {
opacity: 0.19;
width: 10px;
height: 10px;
left: 48.6vw;
animation: fall-63 12s -27s ease-in infinite reverse;
}
.bubble:nth-child(63) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-63 {
0.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 29.9vw;
}
}
.bubble:nth-child(64) {
opacity: 0.13;
width: 8px;
height: 8px;
left: 53vw;
animation: fall-64 48s -21s ease-in infinite reverse;
}
.bubble:nth-child(64) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-64 {
2.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 107.2vw;
}
}
.bubble:nth-child(65) {
opacity: 0.67;
width: 4px;
height: 4px;
left: 5.8vw;
animation: fall-65 60s -21s ease-in infinite reverse;
}
.bubble:nth-child(65) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-65 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 71.5vw;
}
}
.bubble:nth-child(66) {
opacity: 0.42;
width: 2px;
height: 2px;
left: 6.3vw;
animation: fall-66 36s -6s ease-in infinite reverse;
}
.bubble:nth-child(66) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-66 {
4.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 20.3vw;
}
}
.bubble:nth-child(67) {
opacity: 0.74;
width: 10px;
height: 10px;
left: 111vw;
animation: fall-67 36s -33s ease-in infinite reverse;
}
.bubble:nth-child(67) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-67 {
2.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 37.5vw;
}
}
.bubble:nth-child(68) {
opacity: 0.25;
width: 4px;
height: 4px;
left: 0.2vw;
animation: fall-68 12s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(68) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-68 {
6.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 110.8vw;
}
}
.bubble:nth-child(69) {
opacity: 0.28;
width: 16px;
height: 16px;
left: 61.2vw;
animation: fall-69 60s -34.5s ease-in infinite reverse;
}
.bubble:nth-child(69) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-69 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 3vw;
}
}
.bubble:nth-child(70) {
opacity: 0.65;
width: 4px;
height: 4px;
left: 110.3vw;
animation: fall-70 48s -15s ease-in infinite reverse;
}
.bubble:nth-child(70) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-70 {
5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 34vw;
}
}
.bubble:nth-child(71) {
opacity: 0.56;
width: 4px;
height: 4px;
left: 58.4vw;
animation: fall-71 60s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(71) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-71 {
3.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 72vw;
}
}
.bubble:nth-child(72) {
opacity: 0.69;
width: 14px;
height: 14px;
left: 61vw;
animation: fall-72 60s -33s ease-in infinite reverse;
}
.bubble:nth-child(72) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-72 {
0.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 104.2vw;
}
}
.bubble:nth-child(73) {
opacity: 0.18;
width: 20px;
height: 20px;
left: 65.4vw;
animation: fall-73 36s -6s ease-in infinite reverse;
}
.bubble:nth-child(73) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-73 {
3.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 13.9vw;
}
}
.bubble:nth-child(74) {
opacity: 0.84;
width: 12px;
height: 12px;
left: 14.8vw;
animation: fall-74 48s -36s ease-in infinite reverse;
}
.bubble:nth-child(74) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-74 {
7.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 118.2vw;
}
}
.bubble:nth-child(75) {
opacity: 0.22;
width: 6px;
height: 6px;
left: 117.8vw;
animation: fall-75 12s -4.5s ease-in infinite reverse;
}
.bubble:nth-child(75) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-75 {
6.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 20.3vw;
}
}
.bubble:nth-child(76) {
opacity: 0.28;
width: 8px;
height: 8px;
left: 113.8vw;
animation: fall-76 60s -22.5s ease-in infinite reverse;
}
.bubble:nth-child(76) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-76 {
8% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 31.9vw;
}
}
.bubble:nth-child(77) {
opacity: 0.29;
width: 16px;
height: 16px;
left: 94.2vw;
animation: fall-77 12s -3s ease-in infinite reverse;
}
.bubble:nth-child(77) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-77 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 7.9vw;
}
}
.bubble:nth-child(78) {
opacity: 0.3;
width: 4px;
height: 4px;
left: 28.9vw;
animation: fall-78 24s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(78) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-78 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 87.4vw;
}
}
.bubble:nth-child(79) {
opacity: 0.14;
width: 12px;
height: 12px;
left: 94.8vw;
animation: fall-79 12s -36s ease-in infinite reverse;
}
.bubble:nth-child(79) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-79 {
5.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 18.5vw;
}
}
.bubble:nth-child(80) {
opacity: 0.26;
width: 6px;
height: 6px;
left: 9vw;
animation: fall-80 60s -6s ease-in infinite reverse;
}
.bubble:nth-child(80) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-80 {
1.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 68.9vw;
}
}
.bubble:nth-child(81) {
opacity: 0.68;
width: 4px;
height: 4px;
left: 86.6vw;
animation: fall-81 12s -15s ease-in infinite reverse;
}
.bubble:nth-child(81) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-81 {
0.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 89.3vw;
}
}
.bubble:nth-child(82) {
opacity: 0.22;
width: 14px;
height: 14px;
left: 108.9vw;
animation: fall-82 24s -33s ease-in infinite reverse;
}
.bubble:nth-child(82) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-82 {
7.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 5.6vw;
}
}
.bubble:nth-child(83) {
opacity: 0.44;
width: 8px;
height: 8px;
left: 36.7vw;
animation: fall-83 48s -12s ease-in infinite reverse;
}
.bubble:nth-child(83) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-83 {
1.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 36.7vw;
}
}
.bubble:nth-child(84) {
opacity: 0.71;
width: 4px;
height: 4px;
left: 81.1vw;
animation: fall-84 12s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(84) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-84 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 43vw;
}
}
.bubble:nth-child(85) {
opacity: 0.46;
width: 16px;
height: 16px;
left: 75.8vw;
animation: fall-85 12s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(85) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-85 {
2.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 19vw;
}
}
.bubble:nth-child(86) {
opacity: 0.19;
width: 12px;
height: 12px;
left: 79.1vw;
animation: fall-86 12s -34.5s ease-in infinite reverse;
}
.bubble:nth-child(86) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-86 {
4.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 98.6vw;
}
}
.bubble:nth-child(87) {
opacity: 0.82;
width: 12px;
height: 12px;
left: 104.8vw;
animation: fall-87 12s -12s ease-in infinite reverse;
}
.bubble:nth-child(87) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-87 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 54.4vw;
}
}
.bubble:nth-child(88) {
opacity: 0.46;
width: 10px;
height: 10px;
left: 15.6vw;
animation: fall-88 12s -13.5s ease-in infinite reverse;
}
.bubble:nth-child(88) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-88 {
3.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 64vw;
}
}
.bubble:nth-child(89) {
opacity: 0.09;
width: 18px;
height: 18px;
left: 108.3vw;
animation: fall-89 36s -34.5s ease-in infinite reverse;
}
.bubble:nth-child(89) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-89 {
0.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 118.2vw;
}
}
.bubble:nth-child(90) {
opacity: 0.49;
width: 10px;
height: 10px;
left: 100.7vw;
animation: fall-90 48s -27s ease-in infinite reverse;
}
.bubble:nth-child(90) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-90 {
7.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 27.2vw;
}
}
.bubble:nth-child(91) {
opacity: 0.26;
width: 10px;
height: 10px;
left: 106.9vw;
animation: fall-91 12s -33s ease-in infinite reverse;
}
.bubble:nth-child(91) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-91 {
7.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 43.5vw;
}
}
.bubble:nth-child(92) {
opacity: 0.33;
width: 4px;
height: 4px;
left: 5.5vw;
animation: fall-92 36s -27s ease-in infinite reverse;
}
.bubble:nth-child(92) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-92 {
8.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 118.1vw;
}
}
.bubble:nth-child(93) {
opacity: 0.37;
width: 16px;
height: 16px;
left: 72vw;
animation: fall-93 48s -9s ease-in infinite reverse;
}
.bubble:nth-child(93) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-93 {
1% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 45.3vw;
}
}
.bubble:nth-child(94) {
opacity: 0.4;
width: 6px;
height: 6px;
left: 108.2vw;
animation: fall-94 12s -21s ease-in infinite reverse;
}
.bubble:nth-child(94) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-94 {
1% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 51.2vw;
}
}
.bubble:nth-child(95) {
opacity: 0.23;
width: 12px;
height: 12px;
left: 9.5vw;
animation: fall-95 60s -3s ease-in infinite reverse;
}
.bubble:nth-child(95) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-95 {
5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 39.2vw;
}
}
.bubble:nth-child(96) {
opacity: 0.26;
width: 20px;
height: 20px;
left: 81.3vw;
animation: fall-96 60s -19.5s ease-in infinite reverse;
}
.bubble:nth-child(96) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-96 {
5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 111.1vw;
}
}
.bubble:nth-child(97) {
opacity: 0.52;
width: 6px;
height: 6px;
left: 110vw;
animation: fall-97 24s -24s ease-in infinite reverse;
}
.bubble:nth-child(97) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-97 {
6.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 70.4vw;
}
}
.bubble:nth-child(98) {
opacity: 0.55;
width: 12px;
height: 12px;
left: 84.8vw;
animation: fall-98 48s -27s ease-in infinite reverse;
}
.bubble:nth-child(98) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-98 {
7.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 61vw;
}
}
.bubble:nth-child(99) {
opacity: 0.02;
width: 12px;
height: 12px;
left: 3.1vw;
animation: fall-99 36s -18s ease-in infinite reverse;
}
.bubble:nth-child(99) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-99 {
5.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 64.6vw;
}
}
.bubble:nth-child(100) {
opacity: 0.61;
width: 18px;
height: 18px;
left: 58.9vw;
animation: fall-100 48s -31.5s ease-in infinite reverse;
}
.bubble:nth-child(100) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-100 {
1% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 46.7vw;
}
}
.bubble:nth-child(101) {
opacity: 0.28;
width: 10px;
height: 10px;
left: 21.6vw;
animation: fall-101 36s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(101) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-101 {
8.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 9vw;
}
}
.bubble:nth-child(102) {
opacity: 0.17;
width: 16px;
height: 16px;
left: 70.8vw;
animation: fall-102 36s -1.5s ease-in infinite reverse;
}
.bubble:nth-child(102) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-102 {
4.8333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 85.4vw;
}
}
.bubble:nth-child(103) {
opacity: 0.85;
width: 6px;
height: 6px;
left: 89.5vw;
animation: fall-103 12s -18s ease-in infinite reverse;
}
.bubble:nth-child(103) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-103 {
6% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 78.5vw;
}
}
.bubble:nth-child(104) {
opacity: 0.45;
width: 4px;
height: 4px;
left: 7.1vw;
animation: fall-104 36s -10.5s ease-in infinite reverse;
}
.bubble:nth-child(104) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-104 {
0.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 115.6vw;
}
}
.bubble:nth-child(105) {
opacity: 0.79;
width: 14px;
height: 14px;
left: 18.3vw;
animation: fall-105 12s -7.5s ease-in infinite reverse;
}
.bubble:nth-child(105) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-105 {
0.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 61vw;
}
}
.bubble:nth-child(106) {
opacity: 0.73;
width: 6px;
height: 6px;
left: 20.7vw;
animation: fall-106 36s -15s ease-in infinite reverse;
}
.bubble:nth-child(106) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-106 {
1.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 49.1vw;
}
}
.bubble:nth-child(107) {
opacity: 0.56;
width: 20px;
height: 20px;
left: 83.3vw;
animation: fall-107 12s -15s ease-in infinite reverse;
}
.bubble:nth-child(107) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-107 {
8% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 116.6vw;
}
}
.bubble:nth-child(108) {
opacity: 0.56;
width: 8px;
height: 8px;
left: 92.5vw;
animation: fall-108 48s -34.5s ease-in infinite reverse;
}
.bubble:nth-child(108) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-108 {
6% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 118.2vw;
}
}
.bubble:nth-child(109) {
opacity: 0.15;
width: 16px;
height: 16px;
left: 95.5vw;
animation: fall-109 24s -28.5s ease-in infinite reverse;
}
.bubble:nth-child(109) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-109 {
3.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 88vw;
}
}
.bubble:nth-child(110) {
opacity: 0.11;
width: 20px;
height: 20px;
left: 0.8vw;
animation: fall-110 36s -15s ease-in infinite reverse;
}
.bubble:nth-child(110) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-110 {
7.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 50vw;
}
}
.bubble:nth-child(111) {
opacity: 0.34;
width: 8px;
height: 8px;
left: 113.5vw;
animation: fall-111 24s -16.5s ease-in infinite reverse;
}
.bubble:nth-child(111) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-111 {
7.1666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 45vw;
}
}
.bubble:nth-child(112) {
opacity: 0.84;
width: 20px;
height: 20px;
left: 46.1vw;
animation: fall-112 24s -7.5s ease-in infinite reverse;
}
.bubble:nth-child(112) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-112 {
7% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 26vw;
}
}
.bubble:nth-child(113) {
opacity: 0.37;
width: 6px;
height: 6px;
left: 70.8vw;
animation: fall-113 24s -30s ease-in infinite reverse;
}
.bubble:nth-child(113) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-113 {
4.6666666667% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 99.5vw;
}
}
.bubble:nth-child(114) {
opacity: 0.5;
width: 4px;
height: 4px;
left: 92.6vw;
animation: fall-114 12s -9s ease-in infinite reverse;
}
.bubble:nth-child(114) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-114 {
6.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 104.3vw;
}
}
.bubble:nth-child(115) {
opacity: 0.22;
width: 16px;
height: 16px;
left: 93.7vw;
animation: fall-115 48s -24s ease-in infinite reverse;
}
.bubble:nth-child(115) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-115 {
2.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 97.5vw;
}
}
.bubble:nth-child(116) {
opacity: 0.25;
width: 6px;
height: 6px;
left: 47.7vw;
animation: fall-116 24s -3s ease-in infinite reverse;
}
.bubble:nth-child(116) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-116 {
7% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 28.3vw;
}
}
.bubble:nth-child(117) {
opacity: 0.7;
width: 8px;
height: 8px;
left: 94.3vw;
animation: fall-117 36s -10.5s ease-in infinite reverse;
}
.bubble:nth-child(117) span {
filter: drop-shadow(0 0 1px #fff);
}
@keyframes fall-117 {
6.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 41.1vw;
}
}
.bubble:nth-child(118) {
opacity: 0.66;
width: 14px;
height: 14px;
left: 20.6vw;
animation: fall-118 48s -37.5s ease-in infinite reverse;
}
.bubble:nth-child(118) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-118 {
4% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 42.9vw;
}
}
.bubble:nth-child(119) {
opacity: 0.54;
width: 6px;
height: 6px;
left: 117.2vw;
animation: fall-119 60s -15s ease-in infinite reverse;
}
.bubble:nth-child(119) span {
filter: drop-shadow(0 0 2px #fff);
}
@keyframes fall-119 {
2.5% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 59.2vw;
}
}
.bubble:nth-child(120) {
opacity: 0.79;
width: 16px;
height: 16px;
left: 65.8vw;
animation: fall-120 36s -24s ease-in infinite reverse;
}
.bubble:nth-child(120) span {
filter: drop-shadow(0 0 3px #fff);
}
@keyframes fall-120 {
3.3333333333% {
transform: rotate(90deg) translateX(0);
}
to {
transform: rotate(90deg) translateX(calc(100vh + 5vmin));
left: 114.4vw;
}
}
.bubble:nth-child(121) {
opacity: 0.8;
width: 6px;
height: 6px;
l.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0