Pure CSS implementation | flowers swaying in the wind

Hi, everyone, I'm Xiao Mian, a front-end developer, and I'm very happy to share articles here. If you like my article, please like ➕ follow ❤️.

Introduction

The main content of today's explanation is the swinging red flower. The layout is html+css layout plus css3 animation effect. This article adds a new knowledge point, transform-origin, which must be familiar to you. This attribute is used to set animation rotation elements. For example, this article needs a small flower movement swing animation, and the base point position of the top middle of the small flower needs to be fixed, so that the small flower can swing left and right normally. If there is no such style, the default is the middle swing, which will look very strange.

Code introduction

It is mainly the production of small flowers. The blue at the bottom temporarily represents the lawn. Let's talk about the implementation process of the small flower layout code.

1. Small flower code: petal + eyes + mouth

The petals are realized by using different rounded corners and rotate attributes to reposition different angles and connect them together.

html:

 <div class="head">
  <div class="eye"></div>
  <div class="eye eye-right"></div>
  <div class="mouth"></div>
  <div class="petal-con">
    <div class="petal01"></div>
    <div class="petal01 petal02"></div>
    <div class="petal01 petal03"></div>
    <div class="petal01 petal04"></div>
    <div class="petal01 petal05"></div>
    <div class="petal01 petal06"></div>
    <div class="petal01 petal07"></div>
    <div class="petal01 petal08"></div>
  </div>
</div>

style:

 .head{
    width: 80px;
    height: 80px;
    background: #EFD4C9;
    border-radius: 60%;
    border: 3px solid;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    top: -124px;
}
.eye{
    width: 6px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 50%;
    margin-left: -24px;
    top: 30px;
}
.eye-right{
    margin-left: 16px;
}
.mouth{
    width: 14px;
    height: 4px;
    border: 3px solid #FA9A9A;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    margin: 0 auto;
    position: absolute;
    top: 58px;
    left: 29px;
}

.petal01{
    width: 44px;
    height: 72px;
    background: #FA9A9A;
    border-radius: 60%/50%;
    border: 3px solid;
    position: absolute;
    top: -64px;
    left: 19px;
    z-index: -1;
    transform: rotate(0);
}
.petal02{
    top: -42px;
    left: 70px;
    transform: rotate(70deg);
    z-index: -2;
}
.petal03{
    top: 5px;
    left: 85px;
    transform: rotate(97deg);
    z-index: -3;
}
.petal04{
    top: 46px;
    left: 52px;
    transform: rotate(146deg);
    z-index: -4;
}
.petal05{
    top: 64px;
    left: 10px;
    transform: rotate(178deg);
    z-index: -5;
}
.petal06{
    top: 41px;
    left: -40px;
    transform: rotate(240deg);
    z-index: -6;
}
.petal07{
    top: -8px;
    left: -53px;
    transform: rotate(280deg);
    z-index: -7;
}
.petal08{
    top: -52px;
    left: -28px;
    transform: rotate(317deg);
    z-index: -7;
}

2. Branches + Leaves

The appearance of the leaves is like this. Set border-radius: 60% 0; rotate the angle and join the branches together.

html:

 <div class="branch">
    <div class="leaf"></div>
    <div class="leaf leaf02"></div>
</div>

style:

 .branch{
    width: 8px;
    height: 200px;
    background: #C0F0A3;
    border: 3px solid;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: 0;
    z-index: -10;
}
.leaf{
    width: 25px;
    height: 30px;
    background: #8BC363;
    border-radius: 60% 0;
    border: 3px solid;
    position: absolute;
    left: 50%;
    margin-left: 11px;
    top: 86px;
    transform: rotate(14deg);

}
.leaf02{
    margin-left: -42px;
    top: 102px;
    transform: rotate(-98deg);
}
.grass{
    width: 100%;
    height: 40px;
    background: #329A7C;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

3. Animation

mouth smile animation

 .mouth{
    transform-origin: center center;
    animation: smile 2s ease infinite;
}
@keyframes smile{
    from{
        width: 14px;
        height: 4px;
        top: 58px;
        left: 29px;
    }
    to{
        top: 58px;
        left: 24px;
        width: 24px;
        height: 6px;
    }
}

small flower swing

 .branch{
    transform-origin: bottom center; 
    animation: swing 2s ease infinite alternate;
}
@keyframes swing{
    from{
        transform: rotate(-5deg);
    }
    to{
        transform: rotate(5deg);
    }
}

final effect

Summarize

The above is the entire production process of the swinging flower. I learned to use the attribute transform-origin: bottom center; to control the animation, the base point needs to be fixed there. It is relatively simple and can be written by hand.

This article participated in the Sifu technical essay , and you are welcome to join.