Symphonie du Burnout

893 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 February 2026

Surfeurs du métro

15 May 2026

Code source HTML5 du jeu Drive Mad

28 August 2025

Studio d'architecture et de design : Design moderne et durable

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