Ramo de flores animado con CSS

246 pauloym2409

Abrir en el editor Publica tu código

Recomendado

16 April 2026

Ejemplo de página de inicio HTML para War Thunder Mobile

18 December 2023

Animación de Texto en HTML y CSS

20 September 2025

Ejemplo HTML de animación de esfera 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>Ramo Animado</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="flower_title">Hoy no eres espectadora, princesa :D "L" </div>

<div class="flower_wrapper" style="left: 50%;">
            <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>

<div class="flower_wrapper" style="left: 70%;">
            <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>
    </div>

</body>
</html>

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

/* Título arriba */
.flower_title {
    position: absolute;
    top: 2vmin;
    width: 100%;
    text-align: center;
    font-size: 2.5vmin;
    color: #fff;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 2px #000;
}

.flower_wrapper{
    position: absolute;
    bottom: 2vmin;
}

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

.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);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.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;
    width: 7vmin;
    height: 17vmin;
    background: var(--leaf-color);
    border-radius: 10vmin 2vmin 10vmin 2vmin;
}

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

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