5.3K views
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}
MIT License