Ramo de flores animado con CSS

194 janisitasanches11

Abrir en el editor Publica tu código

Recomendado

17 May 2024

Aplicación del tiempo

29 July 2024

Animación de introducción de Netflix CSS puro

8 May 2026

GN-Math: Juegos desbloqueados, búsqueda y juego en línea.

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