Symphonie du Burnout

1,039 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 January 2026

Modèle HTML du panneau d'administration visiteur

24 November 2025

Code source HTML5 du jeu aléatoire de panier

13 July 2025

Code HTML CSS JavaScript du jeu Pac-Man

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

.shape {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0;
  animation: burnout 10s infinite linear; 
}
.shape:nth-child(1) {
  background-color: #ff5733; /* Cor inicial - Enérgica */
}
.shape:nth-child(2) {
  background-color: #ff9800; /* Cor em mudança - Diminuição da energia */
}
.shape:nth-child(3) {
  background-color: #00e676; /* Cor de calma - Esgotamento */
}

@keyframes burnout {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  40% {
    opacity: 0.8;
    transform: scale(1);
  }
  60% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  80% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}