Criando fogos de Artifício com HTML, CSS e Java-Script

Enviado por mrab em 4. Fevereiro 2024 - 16:02

Neste tutorial mergulharemos na arte de criar fogos de artifício incríveis.

O Que Você Vai Aprender:

- Estruturação inicial em HTML para o seu show de fogos.
- Estilização dinâmica com CSS para cores vibrantes e animações deslumbrantes.
- Implementação de lógica em JavaScript para criar explosões aleatórias e envolventes.

link para os códigos: fireworks.zip

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Fogos de artifício</title>
<style>
body {
  background: url("cristo.jpg") #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;  
}

@keyframes fogos {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--tamanhoInicial); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--tamanhoFinal); opacity: 0; }
}

.fogos,
.fogos::before,
.fogos::after
{
  --tamanhoInicial: 0.5vmin;
  --tamanhoFinal: 45vmin;
  --tamanhoParticula: 0.2vmin;
  --cor1: #FFFFE0;
  --cor2: #FAEBD7;
  --cor3: #D2B48C;
  --cor4: #FFFACD;
  --cor5: #7B68EE;
  --cor6: #B0E0E6;
  --y: -30vmin;
  --x: -50%;
  --initialY: 60vmin;
  content: "";
  animation: fogos 4s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, var(--y));
  width: var(--tamanhoInicial);
  aspect-ratio: 1;
  background:     
    
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 50% 0%,
    radial-gradient(circle, var(--cor2) var(--tamanhoParticula), #0000 0) 100% 50%,
    radial-gradient(circle, var(--cor3) var(--tamanhoParticula), #0000 0) 50% 100%,
    radial-gradient(circle, var(--cor4) var(--tamanhoParticula), #0000 0) 0% 50%,
    
    /* parte de baixo, lado direito */
    radial-gradient(circle, var(--cor5) var(--tamanhoParticula), #0000 0) 80% 90%,
    radial-gradient(circle, var(--cor6) var(--tamanhoParticula), #0000 0) 95% 90%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 90% 70%,
    radial-gradient(circle, var(--cor2) var(--tamanhoParticula), #0000 0) 100% 60%,
    radial-gradient(circle, var(--cor3) var(--tamanhoParticula), #0000 0) 55% 80%,
    radial-gradient(circle, var(--cor4) var(--tamanhoParticula), #0000 0) 70% 77%,
    
    /* parte de baixo, lado esquerdo */
    radial-gradient(circle, var(--cor5) var(--tamanhoParticula), #0000 0) 22% 90%,
    radial-gradient(circle, var(--cor6) var(--tamanhoParticula), #0000 0) 45% 90%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 33% 70%,
    radial-gradient(circle, var(--cor2) var(--tamanhoParticula), #0000 0) 10% 60%,
    radial-gradient(circle, var(--cor3) var(--tamanhoParticula), #0000 0) 31% 80%,
    radial-gradient(circle, var(--cor4) var(--tamanhoParticula), #0000 0) 28% 77%,
    radial-gradient(circle, var(--cor5) var(--tamanhoParticula), #0000 0) 13% 72%,
    
    /* parte de baixo, lado esquerdo */
    radial-gradient(circle, var(--cor6) var(--tamanhoParticula), #0000 0) 80% 10%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 95% 14%,
    radial-gradient(circle, var(--cor2) var(--tamanhoParticula), #0000 0) 90% 23%,
    radial-gradient(circle, var(--cor3) var(--tamanhoParticula), #0000 0) 100% 43%,
    radial-gradient(circle, var(--cor4) var(--tamanhoParticula), #0000 0) 85% 27%,
    radial-gradient(circle, var(--cor5) var(--tamanhoParticula), #0000 0) 77% 37%,
    radial-gradient(circle, var(--cor6) var(--tamanhoParticula), #0000 0) 60% 7%,
    
    /* parte de cima, lado direito */
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 22% 14%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 45% 20%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 33% 34%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 10% 29%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 31% 37%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 28% 7%,
    radial-gradient(circle, var(--cor1) var(--tamanhoParticula), #0000 0) 13% 42%
    ;
  background-size: var(--tamanhoInicial) var(--tamanhoInicial);
  background-repeat: no-repeat;
}

.fogos::before {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;

transform: translate(-50%, -50%) rotate(40deg) scale(2) rotateY(40deg);
   animation: fogosPseudo 10s infinite; 
}

.fogos::after {
  --x: -50%;
  --y: -50%;
  --initialY: -50%;
  transform: translate(-50%, -50%) rotate(170deg) scale(.9) rotateY(-30deg); 
   animation: fogosPseudo 40s infinite; 
}

.fogos:nth-child(2) {
  --x: 40vmin;
  --y: -20vmin;
}

.fogos:nth-child(2),
.fogos:nth-child(2)::before,
.fogos:nth-child(2)::after {
  --cor1: #FFC0CB;
  --cor2: #EE82EE;
  --cor3: #FF00FF;
  --cor4: #DA70D6;
  --cor5: #DDA0DD;
  --cor6: #E6E6FA;  
  --tamanhoFinal: 40vmin;
  animation-delay: -45s;
}

.fogos:nth-child(3) {
  --x: 80vmin;
  --y: -40vmin;
}

.fogos:nth-child(3),
.fogos:nth-child(3)::before,
.fogos:nth-child(3)::after {
  --cor1: #AFEEEE;
  --cor2: #40E0D0;
  --cor3: #87CEFA;
  --cor4: #708090;
  --cor5: #E0FFFF;
  --cor6: #E6E6FA;
  --tamanhoFinal: 35vmin;
  animation-delay: -30s;
}

.fogos:nth-child(4) {
  --x: -30vmin;
  --y: -30vmin;
}

.fogos:nth-child(4),
.fogos:nth-child(4)::before,
.fogos:nth-child(4)::after {
  --cor1: #fff;
  --cor2: #bbb;
  --cor3: #ccc;
  --cor4: #ccc;
  --cor5: #bbb;
  --cor6: #fff;
  --tamanhoFinal: 100vmin;
  animation-delay: -15s;
}

.fogos:nth-child(5) {
  --x: -40vmin;
  --y: -40vmin;
}

.fogos:nth-child(5),
.fogos:nth-child(5)::before,
.fogos:nth-child(5)::after {
  --cor1: #FFC0CB;
  --cor2: #EE82EE;
  --cor3: #FF00FF;
  --cor4: #DA70D6;
  --cor5: #DDA0DD;
  --cor6: #E6E6FA;  
  --tamanhoFinal: 100vmin;
  animation-delay: -20s;
}

</style>
</head>
<body>
<div class="fogos" id="fogos1"></div>
<div class="fogos" id="fogos2"></div>
<div class="fogos" id="fogos3"></div>
<div class="fogos" id="fogos4"></div>
<div class="fogos" id="fogos5"></div>
<div class="fogos" id="fogos6"></div>
<div class="fogos" id="fogos7"></div>
<div class="fogos" id="fogos8"></div>
<div class="fogos" id="fogos9"></div>
<div class="fogos" id="fogos10"></div>

// Função para ajustar randomicamente a posição de x e y na classe fogos
  function FogosPosition() {
    document.querySelectorAll('.fogos').forEach(function(fogos, index) {
      fogos.style.left = getRandomArbitrary(0, 90) + '%';
      fogos.style.top = getRandomArbitrary(20, 60) + 'vh';
    });
  }

// Ajusta a posição inicial
 FogosPosition();

// Ajusta a posição entre 5 e 10 segundos
  setInterval(FogosPosition, getRandomArbitrary(5000, 10000));
});
</script>

</body>
</html>

Seção:

HTML/CSS