Tournesol maléfique

25 Mad_Official

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 March 2026

Animation CSS Tournesol, Feux d'artifice, Lucioles

20 September 2025

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

20 September 2025

Feux d'artifice animés CSS, lucioles, tournesol

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</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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>
    <div class="light light-1"></div>
    <div class="light light-2"></div>
    <div class="light light-3"></div>
    <div class="light light-4"></div>
    <div class="light light-5"></div>
    <div class="light light-6"></div>
    <div class="light light-7"></div>
    <div class="light light-8"></div>
    <div class="light light-9"></div>
    <div class="light light-10"></div>
    <div class="light light-11"></div>
    <div class="light light-12"></div>
</body>
</html>

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Evil Sunflower Animation</title>
  <style>
    * { padding: 0; margin: 0; box-sizing: border-box; } 
    
    :root { 
      --color-bg: linear-gradient(to top, #1a0033, #05000a); /* Dark, ominous void */
      --line-color: linear-gradient(to left top, #3a5f3d 20%, #0d2411, #08140a); /* Toxic, rotted green stem */
      --flower-center: radial-gradient(circle, #ff0055 15%, #3e0066 40%, #11001c 70%); /* Pulsing demonic eye */
      --leaf-color: radial-gradient(circle, #44165c, #0a0314); /* Thorny purple leaves */
      --petal-color: linear-gradient(to top, #ff0055, #990022); /* Crimson blade petals */
    }

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; 
      transform: translateX(-50%);
    }

.flower_stem { 
      width: 2.5vmin; 
      height: 65vmin; 
      background-image: var(--line-color); 
      border-radius: 4vmin; 
      box-shadow: inset -0.5vmin 0 1vmin rgba(0,0,0,0.8);
    }

.flower_center { 
      position: absolute; 
      top: -3vmin; 
      left: 50%; 
      z-index: 5; 
      transform: translateX(-50%) rotate(-10deg); 
      width: 22vmin; 
      height: 22vmin; 
      border-radius: 50%; 
      background: var(--flower-center); 
      box-shadow: 0 0 4vmin #ff0055;
      animation: open-flower-middle 2s 0.4s backwards, eye-pulse 2s infinite ease-in-out alternate; 
    }

.flower_petal { 
      position: absolute; 
      left: 50%; 
      z-index: 3; 
      bottom: 55vmin; 
      width: 6vmin; 
      height: 24vmin; 
      background: var(--petal-color); 
      /* Sharp dagger/blade shape */
      clip-path: polygon(50% 0%, 100% 70%, 50% 100%, 0% 70%); 
      transform-origin: center bottom; 
    }

/* Jagged Petal Rotations */
    .flower_petal-1  { transform: translateX(-50%) rotate(0deg); } 
    .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: 50%; 
      width: 8vmin; 
      height: 18vmin; 
      background: var(--leaf-color); 
      border: 1px solid #ff0055;
      /* Sharp serrated thorn shape */
      clip-path: polygon(0 0, 100% 30%, 70% 60%, 100% 100%, 0 70%);
      transform-origin: center bottom; 
    }

.flower_leaf-1 { bottom: 18vmin; transform: translateX(-45%) rotate(75deg); } 
    .flower_leaf-2 { bottom: 25vmin; transform: translateX(-55%) rotate(-75deg); scale: -1 1; }

/* Spooky Floating Embers */
    .flower_light { 
      position: absolute; 
      bottom: 70vmin; 
      width: 1.2vmin; 
      height: 1.2vmin; 
      background-color: #ff0055; 
      border-radius: 50%; 
      filter: blur(0.1vmin); 
      animation: light-ans 3.5s linear infinite backwards; 
    }

.flower_light:nth-child(odd) { background-color: #9900ff; box-shadow: 0 0 1vmin #9900ff;} 
    .flower_light-1 { left: -3vmin; animation-delay: 1s; } 
    .flower_light-2 { left: 4vmin; animation-delay: 0.5s; } 
    .flower_light-3 { left: -7vmin; animation-delay: 0.3s; } 
    .flower_light-4 { left: 7vmin; animation-delay: 0.9s; } 
    .flower_light-5 { left: -1vmin; animation-delay: 1.5s; } 
    .flower_light-6 { left: -5vmin; animation-delay: 3s; } 
    .flower_light-7 { left: 4vmin; animation-delay: 2s; } 
    .flower_light-8 { left: -8vmin; animation-delay: 3.5s; }

/* Ambient Background Motes */
    .light { 
      position: absolute; 
      bottom: 0vmin; 
      width: 1vmin; 
      height: 1vmin; 
      background-color: #ff0055; 
      border-radius: 50%; 
      filter: blur(0.3vmin); 
      animation: light-ans-background 6s linear infinite backwards; 
    }

.light:nth-child(odd) { background-color: #3e0066; } 
    .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: 90vw;   animation-delay: 2s; } 
    .light-8  { left: 60vw;   animation-delay: 3.5s; } 
    .light-9  { left: 70vw;   animation-delay: 2s; } 
    .light-10 { left: 95vw;   animation-delay: 3.5s; } 
    .light-11 { left: 75vw;   animation-delay: 3s; } 
    .light-12 { left: 85vw;   animation-delay: 0.5s; }

/* Keyframes */
    @keyframes open-flower-middle { 0% { opacity: 0; transform: translateX(-50%) scale(0); } } 
    
    @keyframes eye-pulse {
      0% { box-shadow: 0 0 2vmin #ff0055; }
      100% { box-shadow: 0 0 6vmin #ff0055, inset 0 0 2vmin #000; }
    }

@keyframes light-ans { 
      0% { opacity: 0; transform: translateY(0vmin) scale(1); } 
      25% { opacity: 1; transform: translateY(-10vmin) translateX(-3vmin); } 
      50% { opacity: 1; transform: translateY(-25vmin) translateX(3vmin); } 
      100% { transform: translateY(-45vmin) scale(0.2); opacity: 0; filter: blur(0.5vmin); } 
    }

@keyframes light-ans-background { 
      0% { opacity: 0; transform: translateY(0vmin); } 
      50% { opacity: 0.6; transform: translateY(-30vmin) translateX(4vmin); } 
      100% { transform: translateY(-70vmin); opacity: 0; } 
    }
  </style>
</head>
<body>

<div class="light light-1"></div>
  <div class="light light-2"></div>
  <div class="light light-3"></div>
  <div class="light light-4"></div>
  <div class="light light-5"></div>
  <div class="light light-6"></div>
  <div class="light light-7"></div>
  <div class="light light-8"></div>
  <div class="light light-9"></div>
  <div class="light light-10"></div>
  <div class="light light-11"></div>
  <div class="light light-12"></div>

<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>

</body>
</html>