Floating Bubbles Animation
Home
Snippets
Floating Bubbles Animation
HTML
CSS
JS
<div></div>
* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; font-family: Arial, sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0d1b2a; position: relative; } .bubble { position: absolute; bottom: -50px; width: 20px; height: 20px; background: radial-gradient(circle, #ff5c93, #ff66c4); border-radius: 50%; opacity: 0.7; animation: float 6s linear infinite; } @keyframes float { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 50% { opacity: 1; } 100% { transform: translateY(-100vh) scale(0.5); opacity: 0; } }
const createBubble = () => { const bubble = document.createElement('div'); bubble.classList.add('bubble'); const size = Math.random() * 20 + 10 + 'px'; bubble.style.width = size; bubble.style.height = size; bubble.style.left = Math.random() * 100 + 'vw'; bubble.style.animationDuration = Math.random() * 3 + 4 + 's'; document.body.appendChild(bubble); setTimeout(() => { bubble.remove(); }, 6000); }; setInterval(createBubble, 150);
Ad #1
Ad #2
Scroll to Top