1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Animation</title>
7 <style>
8 body {
9 background-color: #000;
10 margin: 0;
11 padding: 0;
12 overflow: hidden;
13 }
14 .bubbles {
15 position: absolute;
16 top: 0;
17 left: 0;
18 width: 100%;
19 height: 100%;
20 }
21 .bubble {
22 position: absolute;
23 border-radius: 50%;
24 background-color: #4682B4;
25 }
26 </style>
27</head>
28<body>
29 <div class="bubbles"></div>
30 <script>
31 const bubblesContainer = document.querySelector('.bubbles');
32 let bubbles = [];
33
34 function createBubble() {
35 const bubble = document.createElement('div');
36 bubble.classList.add('bubble');
37 bubble.style.width = `${Math.random() * 20 + 10}px`;
38 bubble.style.height = bubble.style.width;
39 bubble.style.left = `${Math.random() * 100}%`;
40 bubble.style.top = `${Math.random() * 100}%`;
41 bubblesContainer.appendChild(bubble);
42 bubbles.push(bubble);
43 }
44
45 function animateBubbles() {
46 for (let i = bubbles.length - 1; i >= 0; i--) {
47 const bubble = bubbles[i];
48 const left = parseFloat(bubble.style.left);
49 const top = parseFloat(bubble.style.top);
50 let newLeft = left + 0.5;
51 let newTop = top - 0.5;
52 if (newTop < 0) {
53 newTop = 100;
54 newLeft = Math.random() * 100;
55 }
56 bubble.style.left = `${newLeft}%`;
57 bubble.style.top = `${newTop}%`;
58 if (newLeft > 100) {
59 bubblesContainer.removeChild(bubble);
60 bubbles.splice(i, 1);
61 }
62 }
63 }
64
65 function init() {
66 for (let i = 0; i < 50; i++) {
67 createBubble();
68 }
69 setInterval(() => {
70 animateBubbles();
71 if (Math.random() < 0.05) {
72 createBubble();
73 }
74 }, 16);
75 }
76
77 init();
78 </script>
79</div>
80</body>
81</html>