simple balloons

Open In Editor Publish Your Code

.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;

}

simple balloons

Recommended

A Simple Login Page

Simple Topbar

Simple HTML Login Form

HTML

CSS

JS

Recommended

A Simple Login Page

Simple Topbar

Simple HTML Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS