Il sussurratore del codice

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

26 December 2024

Modello HTML per lettore di giochi Flash Ruffle

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%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.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; }
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.code-element {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
  animation: codeDance 3s infinite alternate;
}
@keyframes codeDance {
  0% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  50% {
    opacity: 1; 
    transform: scale(1); 
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

.code-element:nth-child(1) {
  background: #F8F8F2;
  animation-delay: 0s;
} /* Light gray background for the first element */
.code-element:nth-child(2) { 
  background: #66D9EF; 
  animation-delay: 0.2s;
} 
.code-element:nth-child(3) {
  background: #AE81FF; 
  animation-delay: 0.4s;
}
.code-element:nth-child(4) {
  background: #F92672;
  animation-delay: 0.6s;
}

/* ... more elements, varying colors and animation delays ... */

Il sussurratore del codice

Consigliato

Un codice di pan4o

Carte adesive impilate

Modello HTML per lettore di giochi Flash Ruffle

HTML

CSS

JS

Consigliato

Un codice di pan4o

Carte adesive impilate

Modello HTML per lettore di giochi Flash Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS