floraison de données

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

17 April 2025

Code source HTML5 du jeu Stick Merge

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é

Un code de Mete Han

Bascule dentée

Code source HTML5 du jeu Stick Merge

HTML

CSS

JS

Recommandé

Un code de Mete Han

Bascule dentée

Code source HTML5 du jeu Stick Merge

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS