Girasol malvado

145 Mad_Official Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

20 September 2025

Demostración de girasoles, luciérnagas y fuegos artificiales animados con CSS

11 April 2026

Estructura CSS del girasol HTML

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>