Sinfonia del burnout

381 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 July 2025

Modello HTML per la pagina di pagamento della carta Visa

25 September 2025

Layout della scheda CSS con sfondo sfumato

29 July 2025

Elenco delle schede aziendali con branding e marketing

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

Consigliato

Modello HTML per la pagina di pagamento della carta Visa

Layout della scheda CSS con sfondo sfumato

Elenco delle schede aziendali con branding e marketing

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS