Ramo de flores animado con CSS

308 pauloym2409

Abrir en el editor Publica tu código

Recomendado

20 August 2024

Formulario de inicio de sesión LED

23 June 2025

Un código de Mete

5 May 2026

Escape Road 2: Juego HTML de persecución a alta velocidad

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