Ramo de flores animado con CSS

77 pauloym2409

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

Ramo de flores animado con CSS

Recommended