Ramo de flores animado con CSS

313 janisitasanches11

Abrir en el editor Publica tu código

Recomendado

19 January 2026

Reproductor de juegos Flash con emulador Ruffle

25 March 2025

Línea de tiempo de la rueda - CSS puro

10 August 2025

Pestañas HTML con botón de cierre

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