balões simples

490 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

24 August 2025

Exemplo simples de formulário de registro em HTML

14 September 2024

login senha simples

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;

}

balões simples

Recomendado

Exemplo simples de formulário de registro em HTML

Calculadora Simples

login senha simples

HTML

CSS

JS

Recomendado

Exemplo simples de formulário de registro em HTML

Calculadora Simples

login senha simples

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS