codice di ballo

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

13 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);} 
}

codice di ballo

Consigliato

Un codice di Metehan

Un codice di parajulisanket2

Notifica di brindisi

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di parajulisanket2

Notifica di brindisi

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS