Animation CSS Tournesol, Feux d'artifice et Lucioles

180 castro.tsucamoto

Ouvrir dans l'éditeur Publiez votre code

Animation CSS Tournesol, Feux d'artifice et Lucioles

Recommandé

21 June 2025

Conteneur d'effets de lumière HTML avec CSS

26 June 2025

Site e-commerce HTML, Tailwind CSS, Shopping

19 May 2025

Montres connectées de luxe redéfinissant l'élégance et la technologie

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 Mi Amor</div>
  <div id="mensaje-inferior">Un girasol para una estrella</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é

Conteneur d'effets de lumière HTML avec CSS

Site e-commerce HTML, Tailwind CSS, Shopping

Montres connectées de luxe redéfinissant l'élégance et la technologie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS