Fogos de artifício e vaga-lumes animados em CSS com girassol

Abrir no Editor Publique Seu Código

Recomendado

13 November 2024

Trecho de animação do ponto de foco CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sunflower Night with Fireworks and Fireflies</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: #000;
    overflow: hidden;
    position: relative;
    font-family: 'Comic Sans MS', cursive, sans-serif;
  }

/* Mensaje centrado arriba con duración larga */
  #mensaje-feliz {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffeb3b;
    color: #333;
    font-weight: bold;
    font-size: 26px;
    padding: 20px 35px;
    border-radius: 10px;
    box-shadow: 0 0 15px #fbc02d;
    opacity: 1;
    animation: fadeOut 15s ease forwards;
    z-index: 10000;
    white-space: nowrap;
    text-align: center;
  }
  @keyframes fadeOut {
    0%, 93% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }

/* Mensaje inferior */
  #mensaje-inferior {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #000;
    font-weight: bold;
    font-size: 28px;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 0 8px #000;
    z-index: 10001;
    white-space: nowrap;
  }

/* Fuegos artificiales */
  .firework {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, white 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    box-shadow:
      0 0 6px 3px white,
      0 0 10px 5px white;
    animation: explode 1s ease forwards;
  }
  @keyframes explode {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }
    100% {
      transform: scale(12);
      opacity: 0;
    }
  }

/* Luciérnagas */
  .firefly {
    position: fixed;
    background: radial-gradient(circle, #ffff99 0%, transparent 70%);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    opacity: 0.8;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    box-shadow: 0 0 6px 3px #ffff99;
    z-index: 9000;
  }

/* Animaciones de movimiento para luciérnagas */
  @keyframes move1 { 0%, 100% { transform: translate(0, 0);} 50% { transform: translate(20px, 15px);} }
  @keyframes move2 { 0%, 100% { transform: translate(0, 0);} 50% { transform: translate(-15px, -10px);} }
  @keyframes move3 { 0%, 100% { transform: translate(0, 0);} 50% { transform: translate(10px, -20px);} }
  @keyframes move4 { 0%, 100% { transform: translate(0, 0);} 50% { transform: translate(-20px, 10px);} }
  @keyframes move5 { 0%, 100% { transform: translate(0, 0);} 50% { transform: translate(15px, 20px);} }

@keyframes glow {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 6px 3px #ffff99; }
    50% { opacity: 0.3; box-shadow: none; }
  }
</style>
</head>
<body>

<div id="mensaje-feliz">Feliz día de las flores amarillas Vickitex :3  </div>
  <div id="mensaje-inferior">Um girassol para você, senhorita linda.</div>
  <div class="sunflower">
    <div class="flower_wrapper">
      <div class="flower_stem"></div>
      <div class="flower_center"></div>
      <div class="flower_petal flower_petal-1"></div>
      <div class="flower_petal flower_petal-2"></div>
      <div class="flower_petal flower_petal-3"></div>
      <div class="flower_petal flower_petal-4"></div>
      <div class="flower_petal flower_petal-5"></div>
      <div class="flower_petal flower_petal-6"></div>
      <div class="flower_petal flower_petal-7"></div>
      <div class="flower_petal flower_petal-8"></div>
      <div class="flower_petal flower_petal-9"></div>
      <div class="flower_petal flower_petal-10"></div>
      <div class="flower_petal flower_petal-11"></div>
      <div class="flower_petal flower_petal-12"></div>
      <div class="flower_leaf flower_leaf-1"></div>
      <div class="flower_leaf flower_leaf-2"></div>
      <div class="flower_light flower_light-1"></div>
      <div class="flower_light flower_light-2"></div>
      <div class="flower_light flower_light-3"></div>
      <div class="flower_light flower_light-4"></div>
      <div class="flower_light flower_light-5"></div>
      <div class="flower_light flower_light-6"></div>
      <div class="flower_light flower_light-7"></div>
      <div class="flower_light flower_light-8"></div>
    </div>
  </div>

// Fuegos artificiales
    function createFirework() {
      const firework = document.createElement('div');
      firework.className = 'firework';
      const size = Math.random() * 3 + 2;
      firework.style.width = size + 'px';
      firework.style.height = size + 'px';
      const color = colors[Math.floor(Math.random() * colors.length)];
      firework.style.background = `radial-gradient(circle, ${color} 0%, rgba(255,255,255,0) 70%)`;
      firework.style.boxShadow = `0 0 6px 3px ${color}, 0 0 10px 5px ${color}`;
      firework.style.position = 'absolute';
      firework.style.top = Math.random() * window.innerHeight + 'px';
      firework.style.left = Math.random() * window.innerWidth + 'px';
      firework.style.borderRadius = '50%';
      firework.style.opacity = '1';
      body.appendChild(firework);
      firework.style.animation = 'explode 1s ease forwards';
      setTimeout(() => {
        body.removeChild(firework);
      }, 1000);
    }
    setInterval(createFirework, 400);

// Muchas luciérnagas
    const moveAnims = ['move1', 'move2', 'move3', 'move4', 'move5'];
    for(let i = 0; i < 50; i++) {
      const firefly = document.createElement('div');
      firefly.className = 'firefly';
      firefly.style.top = (Math.random() * 100) + 'vh';
      firefly.style.left = (Math.random() * 100) + 'vw';
      const moveAnim = moveAnims[i % moveAnims.length];
      const durMove = (Math.random() * 8 + 4).toFixed(2);
      const durGlow = (Math.random() * 2 + 1).toFixed(2);
      firefly.style.animation = `${moveAnim} ${durMove}s ease-in-out infinite, glow ${durGlow}s ease-in-out infinite`;
      firefly.style.animationDelay = `${Math.random() * 5}s, ${Math.random() * 5}s`;
      body.appendChild(firefly);
    }
  </script>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: linear-gradient(to top, #00d4ff, #000); 
    --line-color: linear-gradient(to left top, #82ff86 20%, #144425, #104e1c);
    --flower-center: radial-gradient(circle, #000, #ff5e00);
    --leaf-color: radial-gradient(circle, #82ff86, #104e1c);
    --petal-color: radial-gradient(circle, #ff5e00, #ffbb00);
}

body{
    background-image: var(--color-bg);
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.flower_wrapper{
    position: absolute;
    left: 50%;
    bottom: 2vmin;
    animation: moving-flower-1 4s linear infinite;
}

.flower_stem{
    width: 2vmin;
    height: 65vmin;
    background-image: var(--line-color);
    border-radius: 4vmin;
    animation-delay: 0.3s;
}

.flower_center{
    position: absolute;
    top: 0vmin;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%) rotate(-10deg);
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background: var(--flower-center);
    animation: open-flower-middle 2s 0.4s backwards;
}

.flower_petal{
    position: absolute;
    left: 50%;
    z-index: 3;
    bottom: 55vmin;
    transform: translateX(-50%);
    width: 7vmin;
    height: 17vmin;
    height: 20vmin;
    background: var(--petal-color);
    clip-path: ellipse(50% 50% at 50% 50%);
    transform-origin: center bottom;
    animation: open-flower 2s 1s backwards;
}

.flower_petal-1{
    border-radius: 50% 50% 50% / 80% 80% 20% 20%;
    background-image: none;
    background: var(--petal-color);
    animation: open-flower 1.4s 1s backwards;
}

.flower_petal-2{
    transform: translateX(-50%) rotate(-30deg);
}
.flower_petal-3{
    transform: translateX(-50%) rotate(-60deg);
}
.flower_petal-4{
    transform: translateX(-50%) rotate(-90deg);
}
.flower_petal-5{
    transform: translateX(-50%) rotate(-120deg);
}
.flower_petal-6{
    transform: translateX(-50%) rotate(-150deg);
}
.flower_petal-7{
    transform: translateX(-50%) rotate(30deg);
}
.flower_petal-8{
    transform: translateX(-50%) rotate(60deg);
}
.flower_petal-9{
    transform: translateX(-50%) rotate(90deg);
}
.flower_petal-10{
    transform: translateX(-50%) rotate(120deg);
}
.flower_petal-11{
    transform: translateX(-50%) rotate(150deg);
}
.flower_petal-12{
    transform: translateX(-50%) rotate(180deg);
}

.flower_leaf{
    position: absolute;
    left: 60%;
    bottom: 18vmin;
    transform: translateX(-45%) rotate(80deg);
    width: 7vmin;
    height: 17vmin;
    background: var(--leaf-color);
    clip-path: none;
    border-radius: 10vmin 2vmin 10vmin 2vmin;
    transform-origin: center bottom;
}

.flower_leaf-1{
    bottom: 18vmin;
    transform: translateX(-45%) rotate(80deg);
}

.flower_leaf-2{
    bottom: 23vmin;
    transform: translateX(-55%) rotate(-80deg);
}

.flower_light{
    position: absolute;
    bottom: 70vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: rgb(255, 251, 0);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: light-ans 4s linear infinite backwards;
}

:nth-child(odd){
        background-color: #23f0ff;
    }

.flower_light-1{
        left: -2vmin;
        animation-delay: 1s;
    }

.flower_light-2{
        left: 3vmin;
        animation-delay: 0.5s;
    }

.flower_light-3{
        left: -6vmin;
        animation-delay: 0.3s;
    }

.flower_light-4{
        left: 6vmin;
        animation-delay: 0.9s;
    }

.flower_light-5{
        left: -1vmin;
        animation-delay: 1.5s;
    }

.flower_light-6{
        left: -4vmin;
        animation-delay: 3s;
    }

.flower_light-7{
        left: 3vmin;
        animation-delay: 2s;
    }

.flower_light-8{
        left: -6vmin;
        animation-delay: 3.5s;
    }

.light{
    position: absolute;
    bottom: 0vmin;
    width: 1vmin;
    height: 1vmin;
    background-color: rgb(255, 251, 0);
    border-radius: 50%;
    filter: blur(0.2vmin);
    animation: light-ans-background 7s linear infinite backwards;
}
    :nth-child(odd){
        background-color: #23f0ff;
    }

.light-1{
        left: 10vmin;
        animation-delay: 1s;
    }

.light-2{
        left: 20vmin;
        animation-delay: 0.5s;
    }

.light-3{
        left: 60vmin;
        animation-delay: 0.3s;
    }

.light-4{
        left: 80vmin;
        animation-delay: 0.9s;
    }

.light-5{
        left: 45vmin;
        animation-delay: 1.5s;
    }

.light-6{
        left: 10vmin;
        animation-delay: 3s;
    }

.light-7{
        left: 90vmax;
        animation-delay: 2s;
    }

.light-8{
        left: 60vmax;
        animation-delay: 3.5s;
    }

.light-9{
        left: 70vmax;
        animation-delay: 2s;
    }

.light-10{
        left: 95vmax;
        animation-delay: 3.5s;
    }

.light-11{
        left: 75vmax;
        animation-delay: 3s;
    }

.light-12{
        left: 85vmax;
        animation-delay: 0.5s;
    }

@keyframes open-flower-leaves{
    0%{
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
}

@keyframes open-flower{
    0%{
        transform: translateX(-50%) rotate(0);
    }

Fogos de artifício e vaga-lumes animados em CSS com girassol

Recomendado

menu de navegação

Botão Hover

Trecho de animação do ponto de foco CSS

HTML

CSS

JS

Recomendado

menu de navegação

Botão Hover

Trecho de animação do ponto de foco CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS