Hot Air Balloon
Home
Snippets
Hot Air Balloon
HTML
CSS
JS
<div class="balloon"> <div class="circle"></div> <div class="basket"> <div class="rope left"></div> <div class="rope right"></div> </div> </div>
body { margin: 0; height: 100vh; background: linear-gradient(to top, #87ceeb, #e0f7fa); overflow: hidden; } .balloon { position: absolute; bottom: -150px; left: 50%; transform: translateX(-50%); animation: float 10s linear infinite; } .balloon .circle { width: 100px; height: 120px; background: radial-gradient(circle at 30% 30%, #ff5f6d, #ffc371); border-radius: 50% 50% 45% 45%; margin: 0 auto; } .balloon .basket { width: 40px; height: 30px; background: #5d4037; margin: 10px auto 0; border-radius: 0 0 5px 5px; position: relative; } .balloon .rope { position: absolute; width: 2px; height: 15px; background: #333; top: -15px; } .rope.left { left: 10px; } .rope.right { right: 10px; } @keyframes float { 0% { bottom: -150px; } 50% { bottom: 60%; } 100% { bottom: 110%; } }
//javascript
Ad #1
Ad #2
Scroll to Top