WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
simple balloons
486
ByBy.inc
Open In Editor
Publish Your Code
Recommended
13 April 2024
Simple CSS Card Template
2 March 2024
Simple Translator app(English to Urdu)
28 August 2025
CSS Tabs Example: Simple HTML Layout
HTML
Copy
CSS
Copy
body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: flex-end; background: linear-gradient(to bottom, #87CEEB, #E0F6FF); overflow: hidden; } .balloon-container { position: relative; display: flex; bottom:70px; animation: subirExplodir 10s linear forwards; } @keyframes subirExplodir{ 0%{ transform:translateY(0) scale(1); } 94%{ transform:translateY(-1000%) scale(1); } 95%{ transform:translateY(-1000%) scale(0.8); } 100%{transform:translateY(-1000%) scale(0);} } .balloon { width: 60px; height: 80px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .blue { background: #1E90FF;display:flex; transform:rotateZ(-25deg) translateY(20px) translateX(32px);} .blue::after{ content:''; position:absolute; width:2px; left:50%; bottom:-80px; height:80px; background:black; } .red { background: #FF4500;display:flex; transform:rotateZ(-15deg); } .red::after{ content:''; position:absolute; width:2px; left:50%; bottom:-80px; height:80px; background:black; } .yellow { background: #FFD700;display:flex; transform:rotateZ(15deg); } .yellow::after{ content:''; position:absolute; width:2px; left:50%; bottom:-80px; height:80px; background:black; } .purple { background: #800080;display:flex; transform:rotateZ(25deg) translateY(20px) translateX(-32px);} .purple:after{ content:''; position:absolute; width:2px; left:50%; bottom:-80px; height:80px; background:black; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */