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

Free Simple HTML Login Form

SIMPLE COUNT

Simple Calculator

HTML

CSS

JS

Recommended

Free Simple HTML Login Form

SIMPLE COUNT

Simple Calculator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS