Data Morphing

Open In Editor Publish Your Code

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

Data Morphing

Recommended

Cyberpunk Data Nexus

Three.js Particle Shape Morphing with Controls

HTML Heart Animation Data Stream

HTML

CSS

JS

Recommended

Cyberpunk Data Nexus

Three.js Particle Shape Morphing with Controls

HTML Heart Animation Data Stream

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS