Webleb - HTML UI Elements - palloncini semplici

HTML

CSS

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;

}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS