floraison de données

1,090 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 January 2026

Modèle HTML de page de connexion Nexus AI

26 May 2025

Un code par mironovbogdan341

16 November 2024

Comment créer une barre latérale de grille en CSS

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

.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 principal -  Florescer de dados */
   @keyframes DataBloom {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

.flor {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #A6E22E, #66D9EF, #AE81FF);
  opacity: 0; 
  animation: DataBloom 1s ease-out infinite; 
}

.flor.flor1 { top: 20%; left: 2%; animation-delay: 0.1s; } /* Colocando as flores em posições diferentes */
.flor.flor2 { top: 60%; left: 40%; animation-delay: 0.2s; }
.flor.flor3 { top: 80%; left: 80%; animation-delay: 0.3s; }