fioritura dei dati

47 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

27 May 2025

Pagina dei contatti futuristica

26 June 2025

Barra dei menu orizzontale

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

fioritura dei dati

Consigliato

Pagina dei contatti futuristica

Profilo dei link social

Barra dei menu orizzontale

HTML

CSS

JS

Consigliato

Pagina dei contatti futuristica

Profilo dei link social

Barra dei menu orizzontale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS