código de baile

Abrir en el editor Publica tu código

Recomendado

6 October 2024

* {
 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 baile

Recomendado

Etiqueta de entrada

¿Un código de Ghost????

Aplicación del tiempo

HTML

CSS

JS

Recomendado

Etiqueta de entrada

¿Un código de Ghost????

Aplicación del tiempo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS