Recreated Animated Android Logo in CSS

Android is an Operating System used by various mobile companies. Android logo is created in CSS and HTML. This logo is animated logo. No JavaScript is used. This logo is 'Green' in color. Want to add this in your blog? Get code here..

In this logo, animation takes place in the head and in the two arms (Left and Right). This logo is very cool. You can also impress your friends by showing this logo.

This logo is created in pure CSS3 and HTML. No software is used to create this logo. Look this logo in the image below.

This logo is very cool because this logo is animated logo.

Add this logo :

Open Blogger in your browser. You can add this logo in your blog's post and in any widget. You can also add this logo in Website, WordPress and in many platforms.
Now copy and paste the below code in your blogger blog.

Copy below CSS and HTML code of Android Logo.

<style>
div div {background: #A4CA39; position: relative;}
.android{
 height: 400px; width: 330px;
 margin-left: 90px;
        margin-top:12px;
}
.mouth{
 width: 220px; height: 100px;
 top: 32px;
 border-radius: 110px 110px 0 0;
 -moz-border-radius: 110px 110px 0 0;
 -webkit-border-radius: 110px 110px 0 0;
 -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
 background: #fff;
 width: 20px; height: 20px;
 position: absolute; top: 42px;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}
.l_ant, .r_ant{
 width: 6px; height: 50px;
 position: absolute; top: -34px;
 
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.l_ant {
 left: 50px;
 transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
}
.r_ant {
 right: 50px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
}

.inner{
 width: 220px; height: 184px;
 top: 40px;
 border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
 width: 50px; position: absolute;
 -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
 height: 150px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
 height: 80px; top: 182px;
 border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}
.mouth:hover {
 -webkit-transform: rotate(-5deg) translate(-4px, -8px);
 -transform: rotate(-5deg) translate(-4px, -8px);
 -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
 -webkit-transform: rotate(15deg) translate(-14px, 0);
 -transform: rotate(15deg) translate(-14px, 0);
 -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
 -webkit-transform: rotate(-30deg) translate(30px, 0);
 -transform: rotate(-30deg) translate(30px, 0);
 -moz-transform: rotate(-30deg) translate(30px, 0);
}
</style>
<div class="android">
<div class="mouth">
<div class="l_ant">
</div>
<div class="r_ant">
</div>
<div class="l_eye">
</div>
<div class="r_eye">
</div>
</div>
<div class="inner">
<div class="l_arm">
</div>
<div class="r_arm">
</div>
<div class="l_leg">
</div>
<div class="r_leg">
</div>
</div>
</div>

If you have any kind of problem, please tell us by comments. Also share it with your friends. Also Subscribe to our Updates.

KB Tricks

Recreated Animated Android Logo in CSS

Labels