Flower animation by using HTML and CSS and JS.


HTML Structure: There's a tag containing a

element with the class "container" and the id "points-container". This will be used to contain the animated points (flowers).

       
        <body>
            <div class="container" id="points-container">  
            </div>
        </body>

JavaScript: It starts by selecting the container element using document.getElementById. It defines a constant numPoints which specifies the number of flowers to be created. The createPoint() function is defined, which creates a new flower element (

with the class "point") and appends it to the container. The initial position of the flower is set to the center of the container. An animation is created using point.animate(). The animation moves the flower from its initial position to a different position with a rotation effect. It uses keyframes to define the animation path and properties such as duration, easing, iterations, and direction. The startAnimation() function is defined, which loops through the specified number of points and creates them using the createPoint() function. Finally, the startAnimation() function is called to begin the animation.

       
       <script>
        const container = document.getElementById("points-container");
       const numPoints = 10;
       
       
       function createPoint() {
           const point = document.createElement("div");
           point.classList.add("point");
           container.appendChild(point);
       
           // Set initial position at the center
           point.style.left = "50%";
           point.style.top = "50%";
       
       
           // Set animation properties
           const animation = point.animate(
               [
                   { transform: "translate(-50%, -50%) rotate(-50deg)" },
                   { transform: "translate(20%, -40%)"}
               ],
               {
                   duration: 2000 + Math.random() * 2000,
                   easing: "linear",
                   iterations: Infinity,
                   direction: "alternate",
               }
           );
       
           return { point, animation };
       }
       
       function startAnimation() {
           for (let i = 0; i < numPoints; i++) {
       
               createPoint();
           }
       }
       
       startAnimation();
       
       
       </script>

CSS: The body is styled to display flex, centering its content both horizontally and vertically, and setting its background color to black. The container class is styled with position relative and occupies the entire viewport (100vh). Two pseudo-elements ::before and ::after are used to create the stem and the base of the flower, respectively. They are positioned absolutely within the container. The .point class styles the flowers with a specific width, height, and background color gradient. It also applies border-radius to create the petal shape.


       
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000000;
        }
        
        .container {
            position: relative;
            width: 100%;
            height:100%;
        }
        .container::before{
            content: '';
            width: 70px;
            height: 200px;
            border-radius: 50%;
            border-left: 10px solid green;
            border-bottom: 10px solid transparent;
            position: absolute;
            top: 60%;
            left: 49%;
        }
        
        .container::after{
            content: '';
            width:90px;
            height:60px;
            border-radius: 50%;
            border-bottom: 20px solid transparent;
            border-top: 20px solid green;
            position: absolute;
            top: 60%;
            left: 50%;
        }
        .point {
          width: 100px;
          height: 100px;
          background: rgb(244,226,54);
          background:linear-gradient(180deg, rgba(244,226,54,1) 0%, rgba(253,29,29,1) 100%);
          position: absolute;
          border-top-right-radius: 0px;
          border-bottom-left-radius:0px ;
          border-bottom-right-radius: 200px;
          border-top-left-radius: 200px;
        }

Elevate your coding skills
and unleash your creativity
with our diverse range
of projects."
Go to my youtube channel..

Me Code Ant