Trasformazione dei dati

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 July 2025

Barra di navigazione dei social media CSS

12 July 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%;
  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;  
}

/* Animação dos elementos de dados */
.data-element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 10px;
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  animation: data-morph 1s ease infinite;
}

.data-element:nth-child(1) { animation-delay: 0s; }
.data-element:nth-child(2) { animation-delay: 0.2s; }
.data-element:nth-child(3) { animation-delay: 0.4s; }

@keyframes data-morph {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

Trasformazione dei dati

Consigliato

Nesso di dati cyberpunk

Barra di navigazione dei social media CSS

fioritura dei dati

HTML

CSS

JS

Consigliato

Nesso di dati cyberpunk

Barra di navigazione dei social media CSS

fioritura dei dati

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS