Symphonie du Burnout

212 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

30 November 2024

Site Web de voyage avec bordure-rayon inversé

30 August 2024

Traducteur simple

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

Recommandé

Page de destination du Samsung Galaxy S24 Ultra

Site Web de voyage avec bordure-rayon inversé

Traducteur simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS