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

Simple CSS Card Template

Simple Snake Game

Translater simple

HTML

CSS

JS

Recommended

Simple CSS Card Template

Simple Snake Game

Translater simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS