Balloons
Home
Snippets
Balloons
HTML
CSS
JS
<div class="balloon"> <div class="string"></div> </div>
body { height: 100vh; margin: 0; background: linear-gradient( #aee1f9, #e0f7ff); overflow: hidden; } .balloon { width: 80px; height: 100px; background: radial-gradient(circle at 40% 30%, #ff6b81, #e8505b); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%); animation: floatUp 12s linear infinite, sway 3s ease-in-out infinite; } .string { width: 2px; height: 100px; background: #333; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); } @keyframes floatUp { 0% { bottom: -120px; } 100% { bottom: 110%; } } @keyframes sway { 0%, 100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg); } }
const createBalloon = () => { const balloon = document.querySelector('.balloon').cloneNode(true); balloon.style.left = Math.random() * 100 + '%'; balloon.style.animationDelay = Math.random() * 1 + 's'; document.body.appendChild(balloon); }; for (let i = 0; i < 5; i++) { setTimeout(createBalloon, i * 1000); }
Ad #1
Ad #2
Scroll to Top