Creating and Animating an Android Logo with HTML & CSS
In this article, we will build an Android logo using HTML and CSS. Our logo will have some animation features as well Like CSS @keyframes animation.
We will make use of the transitional features of CSS3 to create the logo.
Our final logo will look something like this, due to obvious reasons I will not be able to show the animation aspect in this picture itself.
1. Writing the HTML code
The HTML code for this application is quite simple, involving the use of numerous divs, to provide the different body sections for our given logo. We will start by creating our parent div which is called “android”, and then we will create two more divs inside of the parent div, we will call them head and body respectively.
2. Creating the head
The head will basically entail the face of the logo and the body will entail the rest of the body, i.e. the arms, legs, etc.
Our face has two antennas attached to the skull of our logo, we will create them using two different divs, which are antenna a1 and antenna a2 respectively,
And our face will also contain the eyes of the logo, which we define by the divs, eyes a1, and eyes a2 respectively.
The code for our HTML page is in below.
HTML Code :
As you can see, we made use of eight divs in total, four for head, and four for the body.
3. Creating the body
To create the body, we will divide the body into arms, legs and the rest of the abdomen, our parent div here is the div, which initially contains all the three different parts,
We divide it by creating separate code for the hands and the legs.
Now our left arm is given the name, shape b1, and our right arm is given the name, shape b2.
We will later use CSS to give them the shape we see in the photo, and realize how this seemingly complex code can easily be implemented.
Finally, we end our HTML code and move over to CSS, which brings us to the major part of this code.
Before we move further, we need to know the use of divs, and why we have chosen them from all the other HTML elements.
We did that because the divs are the basic elements of any HTML document and with the help of them, we can create an empty box and give it whichever shape we like, no other element in HTML provides us with this thing.
4. Writing the CSS code
To write the CSS code, we will take a top-down approach, where we first set the parent divs, and then sequentially move to all the other elements.
Starting with “android”:
We have defined our parent div as the member of class android,
We could have defined it as an id too, because this name will be given to just this element, i.e., the parent div.
Note: Even before setting the parent divs, we need to give some properties that should be common to all the elements of our HTML code.
CSS Code:
5. Animating the logo
The only part of the logo that will be animated includes the arms and the antennas over the head.
They are quite easy to animate. It is done with the help of the advance features of the CSS3, it was not possible when CSS didn’t have the animation features.
To do that, we will need to use CSS @keyframes
The concept of @keyframes is quite simple, it makes a animation specialized for a particular property and for that particular property only, it is not suggested to include any other property. To declare a @keyframes, we write the name of the identifier followed by animation-name in specified property then we create a @keyframes of that animation name.
@keyframes CSS Code
6. The full source code of animated Android Logo
The full source code of animated android logo with HTML & CSS Using @keyframes Rule.
Full Source Code :
7. Codepen Output :
See the Pen
Animated Android Logo by Coding Taggers (@codingtaggers)
on CodePen.
Post a Comment