Transformación de datos

Abrir en el editor Publica tu código

Recomendado

8 October 2025

Fragmento de animación de carga de CSS

10 December 2024

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

Transformación de datos

Recomendado

Fragmento de animación de carga de CSS

Un código de agilecloud61

Panel de tarjetas

HTML

CSS

JS

Recomendado

Fragmento de animación de carga de CSS

Un código de agilecloud61

Panel de tarjetas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS