floraison de données

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

14 October 2023

Un code de M. Duck

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

floraison de données

Recommandé

Formulaire de connexion

La peur de manquer

Un code de M. Duck

HTML

CSS

JS

Recommandé

Formulaire de connexion

La peur de manquer

Un code de M. Duck

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS