Transformação de dados

264 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

22 April 2025

Um Código de andres.stahr

15 July 2025

Modelo HTML para gerador de citações em francês

18 June 2025

Modelo de formulário de login HTML

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

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

Recomendado

Um Código de andres.stahr

Modelo HTML para gerador de citações em francês

Modelo de formulário de login HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS