codice di ballo

255 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

15 May 2025

Un codice di nasmacadic

10 August 2025

Animazione CSS di astronave aliena con stelle

26 April 2025

Un codice di lebronpaulsuarezz

HTML

CSS

* {
 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);} 
}

Consigliato

Un codice di nasmacadic

Animazione CSS di astronave aliena con stelle

Un codice di lebronpaulsuarezz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS