Démo de feux d'artifice animés CSS Lucioles Tournesol

1947 Fernandx.

Ouvrir dans l'éditeur Publiez votre code

Démo de feux d'artifice animés CSS Lucioles Tournesol

Recommandé

17 December 2025

Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

24 October 2025

Chat suiveur de souris HTML CSS JavaScript

19 October 2025

Morphing de forme de particules Three.js avec contrôles

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 Johana</div>
  <div id="mensaje-inferior">Te Amo Mucho mi guspímisa</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);
    }

Recommandé

Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

Chat suiveur de souris HTML CSS JavaScript

Morphing de forme de particules Three.js avec contrôles

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS