código de dança

Abrir no Editor Publique Seu Código

Recomendado

27 June 2025

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 background-color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 overflow: hidden;
}
.codigo {
 position: absolute;
 top: 0;
 left: 50%;
 max-height:50%;
 height:auto;
 transform: translateX(-50%);
 line-height: 1.6;
 text-align: left;
 color: #F8F8F2; 
 max-width: 570px;
 min-width: 570px;
 background: #272822; 
 padding: 20px;
 font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
 border-radius: 8px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 white-space: pre-line;
 font-size: 14px;
}
.animation-container {
 position: absolute;
 top: 50%;
 height:auto;
 max-height:50%;
 left: 50%;
 color: white; 
 transform: translateX(-50%);
 min-width: 570px;
 max-width: 570px;
 height: 50%;
 overflow: hidden;
 background: #1b1b1f; 
 height:auto;
 display: flex;
 align-items: center;
 justify-content: center;

}
.selector{ color: #F92672; } 
.property { color: #66D9EF; } 
.value-number { color: #AE81FF; }  
.value-string { color: #E6DB74; } 
.value-color { color: #A6E22E; } 
.brace { color: #F8F8F2; } 
.comment { color: #75715E; } 
.function { color: #A6E22E; }

@keyframes dance {
 0% { transform: translateY(0) scale(1); }
 15% { transform: translateY(-10px) scale(1.1); }
 30% { transform: translateY(0) scale(0.9); }
 45% { transform: translateY(10px) scale(1.2); }
 60% { transform: translateY(0) scale(1); }
 75%, 100% { transform: translateY(0) scale(1);} 
}

código de dança

Recomendado

Um código de Mete

Um código por Redllowge

Botão de login

HTML

CSS

JS

Recomendado

Um código de Mete

Um código por Redllowge

Botão de login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS