Morphing des données

1,003 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 March 2024

Modèle de page de destination HTML avec animations

25 February 2026

Générateur de codes QR HTML, JavaScript

15 October 2025

Modèle de page de destination HTML : agence de voyages

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