Frog Animation Using HTML And CSS

In this blog, we code an animal. Yes, you read it correctly just like how used to draw animals in our drawing books. Now we’ll code them using HTML & CSS. And make them with the help of the Front End Development tool which will help us to design and fill the color in the animal parts.

To create this animation we use HTML and pure CSS. We don’t make use of any images or libraries to create this animation. We are going to design a Frog Animation using HTML & CSS.

In today’s tutorial, we will learn how to create a cute Frog Animation Using HTML And CSS.

Hello Coders! Welcome to Codewithrandom with this new and fresh blog in which we’ll learn how to make frogs using HTML & CSS.

HTML Code for Frog Animation

<div id="frog">
<div id="frogHead">
  <div class="frogEyes">
    <div class="eye"> <div id="leftEye">     </div>
      </div>
    <div class="eye"> <div id="rightEye"></div>
      
    </div>
    <div></div>
  </div>
</div>

<div id=frogBody>
</div>

<div id="frogLegs">
  <div id="leftLeg"></div>
  <div id="rightLeg"></div>
</div>
  
</div>

In this HTML Code, we have called the div function in which we have defined all the body parts of the frog in a sequence wise such as head, eyes, body, legs, etc. Let us style the frog body parts and align them using CSS.

How to get data from NASA using NASA API JavaScript

CSS Code for Frog Animation

body {
  background-color: indigo;
  display: flex;
  justify-content: center;
}

#frog {
  width: 400px;
  height: 400px;
  /* border: 1px solid red; */
  margin-top: 10%;
  position: absolute;
}

/* HEAD */
#frogHead {
  width: 200px;
  height: 150px;
  border-radius: 50%;
  background-color: green;
  margin: auto;
}

.frogEyes {
  width: 250px;
  height: 90px;
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.eye {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

#leftEye, #rightEye {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: black;
  border: 5px solid white;
}

/* BODY */
#frogBody {
  width: 300px;
  height: 250px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: -30px;
  background-color: green;
}

#frogLegs {
  width: 350px;
  height: 250px;
  /* border: 1px solid red; */
  position: absolute;
  bottom: 0;
  left: 25px;
  display: flex;
  justify-content: space-between;
}

#leftLeg, #rightLeg {
  width: 50px;
  height: 220px;
  border-radius: 25px;
  background-color: green;
}

#leftLeg { transform: rotate(-20deg); }

#rightLeg { transform: rotate(20deg); }

In this CSS code, we have focused on each body part of the frog one by one. We have styled and aligned them so that it gives the proper look of the frog keeping the size of the screen in mind we have also specified the pixels so that it doesn’t seem that we have styled it that way just like it is seen on the drawing paper. Let us see the final output of the project.

Create a Memory Game using HTML, CSS &JavaScript

Final Output Frog Animation Using HTML And CSS

We have successfully created our Frog Animation Using HTML And CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You For Visiting!!!

Written By – Harsh Sawant

Code By – @harshh9